jquery验证器

2019独角兽企业重金招聘Python工程师标准>>>

使用方法：

所需js文件

jquery.js

jquery.validate.pack.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

转载于:https://my.oschina.net/figoisxjs/blog/127494