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

Posted 2020-06-27 发烧web开发者

笔记：

一、首先引入插件

		<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({
                        
                    });
                }