笔记:
一、首先引入插件
<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