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  name="regFrom">
    <input type="submit" value="测试validion插件"/><p/>
    <div><span>用户名：</span><input type="text"  name="userName"/></div>
    <div><span>密码：</span><input type="text"  name="password" minlength="3"/></div>
    <div><span>确认密码：</span><input type="text"  name="repassword" minlength="3"/></div>
    <div><span>问题：</span><input type="text"  name="question"/></div>
    <div><span>答案：</span><input type="text"  name="answer"/></div>
    <div><span>真实姓名：</span><input type="text"  name="realName"/></div>
    <div><span>证件号码：</span><input type="text"  name="cardNumber"/></div>
    <div><span>手机：</span><input type="text"  name="mobilePhone"/></div>
    <div><span>电话：</span><input type="text"  name="phone"/></div>
    <div><span>E-mail：</span><input type="text"  name="email"/></div>
    <div><span>邮编：</span><input type="text"  name="zipCode"/></div>
    <input type="hidden" />
</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>

这个是经过测试通过了的，可以作为学习的例子.