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

Posted 发烧web开发者

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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({ }); }

以上是关于jquery插件,表单验证validation plugin的使用的主要内容,如果未能解决你的问题,请参考以下文章

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

jQuery学习jQuery插件的使用与写法(表单验证插件-validation)

jquery表单验证插件validation

jQuery基础学习06 jQuery表单验证插件-Validation

jQuery常用插件与jQuery使用validation插件实现表单验证实例

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