要验证的元素通过验证后的动作，如果跟一个字符串，会当作一个 css 类，也可跟一个函数。
无
highlight
function
可以给未通过验证的元素加效果、闪烁等。
无
register.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>注册</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <link type="text/css" href="https://www.jb51.net/jslib/bootstrap-3.3.5/css/bootstrap.min.css"> <script src="https://www.jb51.net/jslib/jquery-1.9.1.min.js" type="text/javascript"></script> <script src="https://www.jb51.net/scripts/form.js" type="text/javascript"></script> <script src="https://www.jb51.net/jslib/jQuery.validate/jquery.validate.js" type="text/javascript"></script> <script src="https://www.jb51.net/jslib/bootstrap-3.3.5/bootstrap.min.js" type="text/javascript"></script> <style type="text/css"> #register-form{ border: 1px solid rgb(197, 197, 197); width: 1000px; margin: auto; border-image: none; padding: 30px; border-radius: 3px; } </style> </head> <body> <h1>用户注册</h1><br> <form role="form" method="get"> <div> <label for="firstname">用户名：</label> <div> <input /> </div> </div> <div> <label for="password">密码：</label> <div> <input type="password" /> </div> </div> <div> <label for="confirm_password">确认密码：</label> <div> <input type="password" /> </div> </div> <div> <label for="email">E-Mail：</label> <div> <input /> </div> </div> <div> <label for="phone">手机号码：</label> <div> <input /> </div> </div> <div> <label for="tel">固定电话：</label> <div> <input /> </div> </div> <div> <label for="address">家庭住址：</label> <div> <input /> </div> </div> <div> <div> <button type="submit">注册</button> <button type="reset">重置</button> </div> </div> </form> </body> </html>
form.js
$(document).ready(function() { // 手机号码验证 jQuery.validator.addMethod("isPhone", function(value, element) { var length = value.length; return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(value)); }, "请正确填写您的手机号码。"); // 电话号码验证 jQuery.validator.addMethod("isTel", function(value, element) { var tel = /^(\d{3,4}-)?\d{7,8}$/g; // 区号－3、4位 号码－7、8位 return this.optional(element) || (tel.test(value)); }, "请正确填写您的电话号码。"); // 匹配密码，以字母开头，长度在6-12之间，必须包含数字和特殊字符。 jQuery.validator.addMethod("isPwd", function(value, element) { var str = value; if (str.length < 6 || str.length > 18) return false; if (!/^[a-zA-Z]/.test(str)) return false; if (!/[0-9]/.test(str)) return fasle; return this.optional(element) || /[^A-Za-z0-9]/.test(str); }, "以字母开头，长度在6-12之间，必须包含数字和特殊字符。"); $("#register-form").validate({ errorElement : 'span', errorClass : 'help-block', rules : { firstname : "required", email : { required : true, email : true }, password : { required : true, isPwd : true }, confirm_password : { required : true, isPwd : true, equalTo : "#password" }, phone : { required : true, isPhone : true }, tel : { isTel : true }, address : { minlength : 10 } }, messages : { firstname : "请输入姓名", email : { required : "请输入Email地址", email : "请输入正确的email地址" }, password : { required : "请输入密码", minlength : jQuery.format("密码不能小于{0}个字 符") }, confirm_password : { required : "请输入确认密码", minlength : "确认密码不能小于5个字符", equalTo : "两次输入密码不一致不一致" }, phone : { required : "请输入手机号码" }, tel : { required : "请输入座机号码" }, address : { required : "请输入家庭地址", minlength : jQuery.format("家庭地址不能少于{0}个字符") } }, //自定义错误消息放到哪里 errorPlacement : function(error, element) { element.next().remove();//删除显示图标 element.after('<span aria-hidden="true"></span>'); element.closest('.form-group').append(error);//显示错误消息提示 }, //给未通过验证的元素进行处理 highlight : function(element) { $(element).closest('.form-group').addClass('has-error has-feedback'); }, //验证通过的处理 success : function(label) { var el=label.closest('.form-group').find("input"); el.next().remove();//与errorPlacement相似 el.after('<span aria-hidden="true"></span>'); label.closest('.form-group').removeClass('has-error').addClass("has-feedback has-success"); label.remove(); }, }); });