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 });
自定义方法验证：
<form role="form" id="form1" method="post" class="validate formvalidate"> <div class="modal-body"> <div class="row"> <div class="col-md-12"> <div class="form-group"> <label class="control-label"><span class="required">*</span>原密码：</label> <input id="accountname" name="accountname" type="text" class="form-control"> </div> </div> <div class="col-md-12"> <div class="form-group"> <label class="control-label"><span class="required">*</span>新密码：</label> <input id="newpwd" name="newpwd" type="text" class="form-control"> </div> </div> <div class="col-md-12"> <div class="form-group"> <label class="control-label"><span class="required">*</span>确认密码：</label> <input id="savepwd" name="savepwd" type="text" class="form-control"> </div> </div> </div> </div> <div class="modal-footer"> <div class="modal-msg"></div> <button type="submit" class="btn btn-success" id="btnPwdSave">确定</button> <button type="reset" class="btn btn-white" data-dismiss="modal">关闭</button> </div> </form>
//表单验证 $(".formvalidate").validate({ debug:true, onfocusout: function(element) { $(element).valid(); }, submitHandler:function() { pageObj.updateUserPwd(); }, rules: { accountname: { required: true, ogpwd:true },newpwd:{ required: true },savepwd:{ required: true, equalTo:"#newpwd" } }, messages: { accountname: { required:"原密码不能为空！" }, newpwd: { required:"新密码不能为空！" }, savepwd: { required:"确认密码不能为空！", equalTo:"两次输入密码不相同！" } } }); jQuery.validator.addMethod("ogpwd", function(value, element) { var opwd = $.md5($("#accountname").val().trim()), userpwd = Utils.getValue("orginpwd"); return this.optional(element) || ( userpwd == opwd ); }, "原密码不正确！");
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({ }); }
