jQuery Validate 校验框架学习总结

jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。

http://www.w3cschool.cc/jquery/jquery-plugin-validate.html w3cschool学习资料。

其实一共可分为3个步骤：

1.添加两个js

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

2.撰写校验文件 下面是我的校验文件

包括异步检测实例和自定义校验规则实例

$.validator.setDefaults({submitHandler: function(form) {// only for demo purposesalert("submitted!");//form.ajaxSubmit();}});//验证是否是手机$.validator.addMethod("isMobile", function(value, element) {             var length = value.length;         var mobile = /^(1(([35][0-9])|(47)|[8][0126789]))\d{8}$/;         return this.optional(element) || (length == 11 && mobile.test(value));         }, "请正确填写您的手机号码"); //验证数据库是否存在$.validator.addMethod("checkUserExist",function(value,element){    var user = value;    $.ajax({        type:"POST",        async:false,         url:"checkUserAction",        data:"username="+user,        success:function(response){            if(response){                res = true;            }else{                res = false;            }        }    });    return res;},"<font color='#E47068'>用户名已存在</font>");$().ready(function() {//alert("dsdsd");// validate the form when it is submittedvar validator = $("#registerNormal").validate({errorPlacement: function(error, element) {// Append error within linked label//alert(error)$( element ).closest( "form" ).find( "#dd" ).html("");$( element ).closest( "form" ).find( "#dd" ).append( error );},errorElement: "span",onkeyup:false,rules:{linknum:{required:true,isMobile:true},username:{required:true,minlength:4,maxlength:16,checkUserExist:true,},password:{required:true,minlength:4,maxlength:16,},passwordAgain:{required:true,equalTo:'#password'}},messages: {username: {required: " 用户名不能为空",minlength: " 用户名在4-16位之间",maxlength: " 用户名在4-16位之间"},password: {required: " 密码不能为空",minlength: " 密码输入太短",maxlength: " 密码输入超长"},passwordAgain:{required: " 密码不能为空",equalTo:"两次密码不一致"},linknum:{required: " 联系方式不能为空",isMobile: "输入正确的号码"}}});$(".cancel").click(function() {validator.resetForm();});});

3.核对html中各个元素名称是否与校验文件中的关键字匹配

<style>.error1 {        color:#ff7800;     }  </style><form  action="registerAction" style="" method="post" class="form-widget" id="registerNormal"><div class="form-warning" data-role="error"><p id="dd"></p></div><div class="form-group"><label class="form-label">账号 <span class="error1">*</span></label><div class="form-control"><label class="input-group"><input type="text" name="username" value="" id="username" class="input-text" placeholder="用户名" data-role="input" /></label></div></div><div class="form-group"><label class="form-label">密码 <span class="error1">*</span></label><div class="form-control"><div class="form-row13"> <label class="input-group"> <input type="password" name="password" id="password"  class="input-text"   placeholder="6-16位，不含空格"> </label></div></div>    </div><div class="form-group"><label class="form-label">确认</label><div class="form-control"><div class="form-row13"><label class="input-group"><input type="password" name="passwordAgain" id="passwordAgain" class="input-text" placeholder="再次输入密码" />                    </label></div></div></div><div class="form-group"><label class="form-label">联系</label><div class="form-control"><label class="input-group"><select  class="input-text" name="select">  <option value="1">手机</option>  <option value="2">QQ</option></select></label></div></div><div class="form-group"><label class="form-label">号码/ID <span class="error1">*</span></label><div class="form-control"><label class="input-group"><input type="text" name="linknum"  id="linknum" class="input-text"/></label></div></div><input type="hidden" name="backUrl" value=""><div class="form-opt"><div class="form-group"><button class="btn btn-primary btn-large js-touch-state" type="submit" data-role="sublimt">提交</button></div><div class="form-group">                <p class="text-group">已有账号？<a href="login.jsp">立即登录></a></p>        </div>    </div></form><script type="text/javascript" src="js/validate/jquery.js"></script><script type="text/javascript" src="js/validate/jquery.validate.js"></script><script type="text/javascript" src="js/validate/signformValidatorClass.js"></script>