jquery插件,表单验证validation plugin的使用

笔记:

一、首先引入插件

		<script type="text/javascript" src="js/jquery-1.10.0.js" ></script>
		<script type="text/javascript" src="js/jquery.validate-1.13.1.js" ></script>

列子:一个简单的登录表单验证

 1             <form id="loginForm">
 2             <label for="userName">用户名:</label>
 3             <input type="text" id="user" name="userName" />
 4             <br /><br />
 5             <label for="passWord">密码:</label>
 6             <input type="password" id="passWord" name="passWord" />
 7             <br /><br />
 8             <label for="passWord">提交:</label>
 9             <input type="submit" id="submit" name="submit" />
10         </form>
 1             $(document).ready(function(){
 2                 $("#loginForm").validate({
 3                     rules:{//定义规则
 4                         userName:{
 5                             required:true,//必填
 6                             minlength:3,//最小
 7                             maxlength:20//最大
 8                         },
 9                         passWord:{
10                             required:true,
11                             minlength:6,
12                             maxlength:16
13                         }
14                     },
15                     //设计为了中文提示
16                     messages:{//定义提示信息
17                         userName:{
18                             required:"必须填写用户名",//必填
19                             minlength:"用户名最小3位",//最小
20                             maxlength:"用户名最大20位"//最大
21                         },
22                         passWord:{
23                             required:"必须填写密码",//必填
24                             minlength:"密码最小6位",//最小
25                             maxlength:"密码最大16位"//最大
26                         }
27                     }
28                 });
29             });

alidate的API

api:     $(document).ready(function(){
                //validate是插件的核心方法,定义了基本的校验规则和一些游泳的配置项
                $("#loginForm").validate({
                    debug:true,//true表示表单不会提交,只进行检查
                    remote:{//远程校验,remote.php为数据的地址
                        url"remote.json",
                        type:"post",
                        data:{
                            loginTime:function(){
                                return +new Date;//把字符转换成数字
                            }
                        }
                    },
                    rules:{//定义规则
                        userName:{
                            required:true,//必填
                            minlength:3,//最小
                            maxlength:20,//最大
                            min:,2//最小值
                            max:20,//最大值
                            range:[2,20],//值范围
                            email:true,//email格式,true必须为email格式
                            url:true,//URL格式
                            date:true,//日期
                            dateISo:true,//ISO日期
                            number:true,//数字
                            digits:true,//整数
                            equalTo:"#password",//与另一个元素值相等,#password"选择器的值
                            minlength:3,//最小
                            maxlength:20,//最大
                            rangelength:[3,20],//长度范围
                        },
                        passWord:{
                            required:true,
                            minlength:6,
                            maxlength:16
                        }
                    },
                    //设计为了中文提示
                    messages:{//定义提示信息
                        userName:{
                            required:"必须填写用户名",//必填
                            minlength:"用户名最小3位",//最小
                            maxlength:"用户名最大20位",//最大
                            remote:"用户名不存在"
                        },
                        passWord:{
                            required:"必须填写密码",//必填
                            minlength:"密码最小6位",//最小
                            maxlength:"密码最大16位"//最大
                        }
                    }
                });

                valid()//检查表单或者某些元素是否有效
                rules("add", rules)//向表单元素增加校验规则
                rules("remove", rules)//删除表单元素校验规则
                //alidator对象
                alidate方法返回的alidator对象,alidator对象有很多有用的方法,如下:
                alidator.form()//验证表单是否有效,返回true/false
                alidator.element(element)//验证某个元素是否有效,返回true/false
                alidator.resetForm()//把表单恢复到验证前原来的状态
                alidator.showErrors(errors)//正对某个元素显示特定的错误信息
                alidator.numberOfInvalids()//返回无效的元素数量

                validator对象静态方法:
                jquery.validator.addMethod(name,method[,message])//增加自定义的验证方法
                jquery.validator.format(template,argument,argumentN...)//格式化字符串,用参数代替模版中的{n}
                jquery.validator.setDefaults(options)//修改插件默认设置
                jquery.validator.addClassRules(name,rules)//为某些包含名为name的class增加组合验证类型

                validate()//方法配置项
                submitHandler//通过验证后运行的函数,可以加上表单提交方法
                invalidHandler//无效表单提交后运行的函数,两个参数event和validator
                ignore//对某些元素不进行验证
                rules//定义校验规则
                messages//通定义提示信息
                groups//对一组元素的验证,用一个错误提示,用errorPlacement控制把出错信息放在哪里
                如:
                submitHandlr:function(form){
                    $ajax({

                    });
                }
时间: 2024-10-13 20:43:43

jquery插件,表单验证validation plugin的使用的相关文章

jQuery插件 -- 表单验证插件jquery.validate.js

最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的javascript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jquery插件之一,经过了全球范围内不同项目的验证,并得到了许多Web开发者的好评.作为一个标准的验证方法库,Validation拥有如下特点: 1.内置验证规则: 拥有必填.数字.Email.URL和信用卡号码等19类内置验证规则 2.自定义验证规则: 可以很方便地自定义验证规则 3.简单强大的验证

jquery插件-表单验证插件-validator对象

三 Validator对象 1.介绍:Validate方法返回的对象称作Validator对象 2.使用 Validator对象常用方法 Validator.form() 返回:Boolean 验证:form返回成功还是失败(整个表单) Validator.element() 返回:Boolean 验证单个元素是成功还是失败(单个的表单元素) Validator.resetForm() 把前面验证的Form回复到验证前的状态 Validator.showErrors() 显示特定的错误信息 Va

jquery插件-表单验证插件-提示信息中文化与定制提示信息

接上一篇 2)messages 提示:修改默认的提示信息最简单的方法是引入message_zh.js文件即可! 如果需要在validate()方法内提示则可以使用本选项 类型:Object 说明:自定义的提示信息,key:value形式,key是要验证的元素,valule可以是字符串或者函数 使用:message:{ username:"请输入你的用户名" filed2:{ required:'必须填写这个字段', email:'请添加一个正确的邮箱格式' } } //和上面填写rul

【锋利的jQuery】表单验证插件踩坑

和前几篇博文提到的一样,由于版本原因,[锋利的jQuery]表单验证插件部分又出现照着敲不出效果的情况. 书中的使用方法: 1. 引入jquery源文件, 2. 引入表单验证插件js文件, 3. 在form中class类名中添加"required","email"等去作为验证时读取的参数. 4. 调用代码: $("#commentform").validate(); 很不幸,报错了.前端有个说法是学新不学旧,这里就不去深究原因,直接提供最新的写法

jQuery formValidator表单验证插件常见有关问题

jQuery formValidator表单验证插件常见问题 如何实现一个控件,根据不同的情况,实现不同的控制? 一个页面上我有几个tab页,如何实现每个Tab页上的控件单独校验? 我采用的页面上文字问题的方式,点提交的时候,有校验未通过的,除了文字提示外,还可以再弹出窗口提示吗? 所有校验通过后,我还要再做别的判断可以吗?我自己的判断没有通过可以中断提交吗? 我有一组的checkbox(radiobutton)如何设置校验? 我有2个表单元素,任意一个元素输入东西就算验证通过,如何写代码?比如

jquery实现表单验证简单实例演示

/* 描述:基于jquery的表单验证插件. */ (function ($) { $.fn.checkForm = function (options) { var root = this; //将当前应用对象存入root var isok = false; //控制表单提交的开关 var pwd1; //密码存储 var defaults = { //图片路径 img_error: "img/error.gif", img_success: "img/success.gi

jQuery简单表单验证效果

jQuery简单表单验证效果:只要有表单的地方,基本都会有表单验证,下面就结合实例简单介绍一下最简单的表单验证,如何防止填写的表单内容为空.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <tit

Laravel教程 七:表单验证 Validation

Laravel教程 七:表单验证 Validation 此文章为原创文章,未经同意,禁止转载. Laravel Form 终于要更新这个Laravel系列教程的第七篇了,期间去写了一点其他的东西. 就不 说废话了吧,直接进入Form Validation的部分吧.几乎在每一个web应用当中都会有表单,而有表单基本就离不开表单验证.在laravel中,其实可以说是有两种方式来进行表单验证:使用Request和使用Validation.下面将分开讲这两部分的内容,而且我会更着重第一种,也更推荐大家使

jQuery基础(常用插件 表单验证,图片放大镜,自定义对象级,jQuery UI,面板折叠)

1.表单验证插件--validate   该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下: $(form).validate({options}) 其中form参数表示表单元素名称,options参数表示调用方法时的配置对象,所有的验证规则和异常信息显示的位置都在该对象中进行设置.     2.表单插件--form 通过表单form插件,调用ajaxForm()方法,实现ajax方式向服务器提交表单数据,并通过方法中的option