jQuery验证控件jquery.validate.js使用说明+中文API
参考：http://www.cnblogs.com/hejunrex/archive/2011/11/17/2252193.html
http://blog.csdn.net/zzq58157383/article/details/7718352
jquery.validate.js是JQuery旗下的一个验证插件，借助JQuery的优势，我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法。使用前请先下载必要的JQuery插件：jquery-1.4.2.min.js和jquery.validate.min.js。
下面演示如何使用jquery.validate.js插件进行表单的验证。
另外再 附上一个完整的例子做说明：
首先需要在页面引入插件：
<script src="lib/jquery.js" type="text/javascript"></script> <script src="lib/jquery.validate.js" type="text/javascript"></script>
CSS:
<style type="text/css"> div { margin-top:20px; font-size: 13px;} div span { display: inline-block; width: 80px; } </style>
HTML:
<form id="regFrom" name="regFrom"> <input type="submit" value="测试validion插件"/><p/> <div><span>用户名：</span><input type="text" id="userName" name="userName"/></div> <div><span>密码：</span><input type="text" id="password" name="password" minlength="3"/></div> <div><span>确认密码：</span><input type="text" id="repassword" name="repassword" minlength="3"/></div> <div><span>问题：</span><input type="text" id="question" name="question"/></div> <div><span>答案：</span><input type="text" id="answer" name="answer"/></div> <div><span>真实姓名：</span><input type="text" id="realName" name="realName"/></div> <div><span>证件号码：</span><input type="text" id="cardNumber" name="cardNumber"/></div> <div><span>手机：</span><input type="text" id="mobilePhone" name="mobilePhone"/></div> <div><span>电话：</span><input type="text" id="phone" name="phone"/></div> <div><span>E-mail：</span><input type="text" id="email" name="email"/></div> <div><span>邮编：</span><input type="text" id="zipCode" name="zipCode"/></div> <input type="hidden" id="isUserNameExist"/> </form>
JS:
<script> $(document).ready(function() { $.validator.setDefaults({ submitHandler : function(form) { form.submit(); } }); // 中文字两个字节 jQuery.validator.addMethod("byteRangeLength", function(value, element, param) { var length = value.length; for (var i = 0; i < length; i++) { if (value.charCodeAt(i) > 127) { length++; } } return this.optional(element) || (length >= param[0] && length <= param[1]); }, "<font color='red'>请确保输入的值在3-15个字节之间(一个中文字算2个字节)</font>"); // 用户名是否存在 jQuery.validator.addMethod("isUserNameExist", function(value, element) { var flag = $.ajax({ type : "POST", url : "validateServlet", data : "username=" + value, async : false, success : function(msg) { alert("返回数据: " + msg); } }).responseText; return this.optional(element) || flag == 1; }, "<font color='red'>该用户不存在</font>"); // 身份证号码验证 jQuery.validator.addMethod("isIdCardNo", function(value, element) { return this.optional(element) || isIdCardNo(value); }, "<font color='red'>请正确输入您的身份证号码</font>"); // 字符验证 jQuery.validator.addMethod("userName", function(value, element) { return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value); }, "<font color='red'>用户名只能包括中文字、英文字母、数字和下划线</font>"); // 手机号码验证 jQuery.validator.addMethod("isMobile", function(value, element) { var length = value.length; return this.optional(element) || (length == 11 && /^(((13[0-9]{1})(15[0-9]{1}))+\d{8})$/ .test(value)); }, "<font color='red'>请正确填写您的手机号码</font>"); // 电话号码验证 jQuery.validator.addMethod("isPhone", function(value, element) { var tel = /^(\d{3,4}-?)?\d{7,9}$/g; return this.optional(element) || (tel.test(value)); }, "<font color='red'>请正确填写您的电话号码</font>"); // 邮政编码验证 jQuery.validator.addMethod("isZipCode", function(value, element) { var tel = /^[0-9]{6}$/; return this.optional(element) || (tel.test(value)); }, "<font color='red'>请正确填写您的邮政编码</font>"); $(regFrom).validate({ rules : { userName : { required : true, userName : true, byteRangeLength : [3, 15], isUserNameExist : true }, password : { required : true }, repassword : { required : true, equalTo : "#password" }, question : { required : true }, answer : { required : true }, realName : { required : true }, cardNumber : { isIdCardNo : true }, mobilePhone : { isMobile : true }, phone : { isPhone : true }, email : { required : true, email : true }, zipCode : { isZipCode : true } }, messages : { userName : { required : "<font color='red'>请填写用户名</font>", byteRangeLength : "<font color='red'>用户名必须在3-15个字符之间(一个中文字算2个字符)</font>", isUserNameExist : "<font color='red'>该用户不存在</font>" }, password : { required : "<font color='red'>请填写密码</font>", minlength : jQuery .format("<font color='red'>至少输入{0}个字符.</font>") }, repassword : { required : "<font color='red'>请填写确认密码webjx</font>", equalTo : "<font color='red'>两次密码输入不相同</font>", minlength : jQuery .format("<font color='red'>至少输入{0}个字符.</font>") }, question : { required : "<font color='red'>请填写您的密码提示问题</font>" }, answer : { required : "<font color='red'>请填写您的密码提示答案</font>" }, realName : { required : "<font color='red'>请填写您的真实姓名</font>" }, email : { required : "<font color='red'>请输入一个Email地址</font>", email : "<font color='red'>请输入一个有效的Email地址</font>" } }, errorPlacement : function(error, element) { error.appendTo(element.parent()); }, success : function(label) { // set as text for IE label.html("<font color='green'>OK!</font>"); }, focusInvalid : false, onkeyup : false }); // 输入框获得焦点时，样式设置 $('input').focus(function() { if ($(this).is(":text") || $(this).is(":password")) $(this).addClass('focus'); if ($(this).hasClass('have_tooltip')) { $(this).parent().parent().removeClass('field_normal') .addClass('field_focus'); } }); // 输入框失去焦点时，样式设置 $('input').blur(function() { $(this).removeClass('focus'); if ($(this).hasClass('have_tooltip')) { $(this).parent().parent().removeClass('field_focus') .addClass('field_normal'); } }); }); </script>
这个是经过测试通过了的，可以作为学习的例子.
