所需js文件

 

例（红色字为必要部分）：

/* 设置默认属性 */

$.validator.setDefaults({

        submitHandler : function(form) {

                form.submit();

        }

});

/* 追加自定义验证方法 */

function validateMobile(value, element) {

        var length = value.length;

        return this.optional(element)

                        || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/

                                        .test(value));

}

function validatePhone(value, element) {

        var tel = /^(\d{3,4}-?)?\d{7,9}$/g;

        return this.optional(element) || (tel.test(value));

}

/* 将自定义验证方法加入验证器中 */

$.validator.addMethod("isMobile", validateMobile, "请正确填写您的手机号码");

$.validator.addMethod("isPhone", validatePhone, "请正确填写您的电话号码");

function validator() {

        /* 验证器主方法 */

        $("#test_form").validate({

                /* 设置验证规则 */

                rules : {

                        mobilePhone : {

                                isMobile : true,

                                required : true

                        },

                        phone : {

                                isPhone : true

                        }

                },

                /* 设置错误信息 */

                messages : {

                        mobile : {

                                required : "手机号码不能为空"

                        }

                },

                /* 错误信息显示 */

                errorPlacement : function(error, element) {

                        if (element.is(":radio")) {

                                error.appendTo(element.closest(".input_box"));

                        } else {

                                error.insertAfter(element);

                        }

                },

                /* 验证器验证参数设置 */

                debug : false,

                focusInvalid : false,

                focusCleanup : true,

                event : "blur",

                ignore : ".ignore",

                errorClass : "app_form_error ",

                success : "app_good_icon",

                errorElement : "em"

        });

}

 

—————————————————————————————————————————

设置默认属性：

submitHandler  当验证通过时，提交当前form。

追加自定义验证方法：

method(value,element)  value为input的值，需要返回值，用以后面rules判断。

将自定义验证方法加入验证器：

$.validator.addMethod(key, method, message);  key用作rules及message内调用，method为验证方法，message为验证不通过时的提示。

验证器主方法 :

dom.validate(rules:{……},messages: {……});  dom为表单元素

设置验证规则：

rules:{field{key:return},……}  field为要验证的地方的id，key为对应验证方法的key，return为预期验证通过所需的返回值。

设置错误信息：

messages:{field{key:message},……}  field为要验证的地方的id，key为对应验证方法的key，message为验证不通过的提示。 (一般用作重定义jQuery.validate自带默认方法提示)

错误信息显示 :

errorPlacement: function(error, element) {error.appendTo( element);}  打印错误信息到element的位置。

验证器验证参数设置 :

debug : boolean  开启debug模式，为true时，只验证，不提交

focusInvalid : boolean  获得焦点时是否验证

event : event  设定触发验证的方法

—————————————————————————————————————————

/* 页面调用 */

$(document).ready(function(){

    validator();

});

 

 

—————————————————————————————————————————

（附：jQuery.validate自带验证方法）

required()                 非空判断

remote(option)          远程验证

minlength(length)       最小长度验证 例:minlength : 13

maxlength(length)      最小长度验证

rangelength(range)    长度范围验证 例: rangelength : [8,16]

min(value)                小于预定值验证

max(value)               大于预定值验证

range(range)             值大小范围验证

email()                     邮箱格式验证

url()                         链接格式验证

date()                      日期格式验证,只验证格式,不验证日期是否存在 格式有:yyyy/MM/dd ; yyyy-MM-dd ; yyyy,MM,dd

dateISO()                 iso标准日期格式验证

dateDE()                  德国标准日期格式验证 dd/MM/yyyy

number()                  数字验证,包括整数、小数

numberDE()               整数验证

digits()                     整数验证

creditcard()              信用卡账号格式验证

accept(extension)      文件后缀验证 例: accept : "doc|xls"

equalTo(other)          匹配验证,用于重复输入密码的比较，非常方便 例: equalTo : password2