Nice Jquery Validator 方法

.validator()

.validator( options )

描述:根据参数初始化验证,验证 jQuery 选中的表单

参数:{Object} options - 可选,参考配置选项

示例

$('#form1').validator({
    timely: 2,
    stopOnError: true,
    fields: {
        email: "required;email",
        password: "required;length(6~16)",
        mobile: "required;mobile"
    },
    valid: function(form) {
        $.post("path/to/server", $(form).serialize())
            .done(function(){
                // some code
            });
    }
});

.validator( validCallback )

描述:初始化验证,验证 jQuery 选中的表单,验证通过后执行回调

参数:{Function} validCallback - 表单验证通过的回调

示例

$('#form1').validator(validCallback);
// 等同于
$('#form1').validator({
    valid: validCallback
});


.validator( instanceMethod, arg1, arg2... )

描述:通过.validator() 方法调用实例方法
参数:{String} instanceMethod - 实例方法名称
参数:{Arguments} argn - 调用实例方法时的参数

示例

// 清空表单验证消息
$('#form1').validator("cleanUp");
// 销毁表单验证
$('#form1').validator("destroy");

.isValid( callback )

描述:判断某个区域或者某个字段是否验证通过,如果字段中有异步 ajax 验证,需要通过 callback 获取验证结果
参数: {Function} callback - 回调函数
示例

// 使用回调函数获取验证结果
$('#mobile').isValid(function(v){
    if (v) {
        // do something
    }
});
// v0.10.5+ 还支持下面这种写法,即回调不带参数,就是验证通过的回调
$('#mobile').isValid(function(){
    // do something
});
// 如果验证的字段中没有 ajax 异步验证,直接获取结果也是可以的
if ( $('#mobile').isValid() ) {
    // do something
} 


$.validator (静态方法)

$.validator(selector, options)

描述:初始化表单。如果 selector 选择的元素存在于 DOM,其等同于 $(selector).validator(options) 这种写法。如果不存在,nice-validator 会 预初始化 该选择器选中的表单,等到该表单存在时就可以直接被验证。

参数:{jqSelector|Element} selector - jQuery 选择器(支持预初始化),或者 DOM Element
参数:{Object} options - 参考配置选项
示例

 

// 即使 "#form1" 这个表单被动态加载,也可以验证
$.validator("#form1", {
    timely: 2,
    stopOnError: true,
    fields: {
        email: "required;email",
        password: "required;length(6~16)",
        mobile: "required;mobile"
    }
});

.config(options)

描述:配置全局选项

参数:{Object} options - 参考配置选项

示例

$.validator.config({
    timely: 2
});

.setTheme(name, options)

描述:配置全局主题
参数:{String} name - 主题名称
参数:{Object} options - 参考配置选项
示例

$.validator.setTheme("myTheme", {
    formClass: "nice-flat",
    msgClass: "n-right",
    timely: 2,
    stopOnError: true
});


instance (实例方法)

实例方法需要获取对象实例,才能调用。

验证初始化的时候会自动初始实例,通过 $form.data('validator') 可以获取到实例

.test(elem, rule)

描述:验证字段是否符合指定的规则
参数:{Element} elem - DOM 元素
参数:{String} rule - 规则
返回:{Boolean}
示例

$("#myForm").validator({
    rules: {
        loginName: function(element) {
            return /^[a-zA-Z]\w{3,}/.test(element.value)
                   || this.test(element, "mobile")
                   || this.test(element, "email")
                   || 'Please fill user name, phone number or E-mail';
        }
    },
    fields: {
        username: "required; loginName",
        password: "required; length(6~16)"
    }
});

.setField()

.setField(key, field)

描述:动态配置字段参数
参数:{String} key - 字段 name 或者 #id
参数:{Object} field - 字段参数
示例

$('form').validator("setField", "username", "required;");
// Remove the field's verification.
$('form').validator("setField", "username", null);


.setField(obj)

描述:动态配置字段参数
参数:{Object} obj - 字段参数 Hash
示例

$('form').validator("setField", {
    username: "required;username",
    pwd: "required;password"
});

.holdSubmit(hold)

描述:防止表单重复提交的措施
参数:{Boolean} hold - 是否控制表单提交
示例

$("#myForm").validator({
    valid: function(form){
        var me = this;
        // Before submitting the form, hold form, to prevent duplicate submission.
        me.holdSubmit();
        $.ajax({
            url: "xxx.php",
            data: $(form).serialize(),
            type: "POST",
            success: function(){
                // After the form is submitted successfully, release hold.
                me.holdSubmit(false);
            }
        });
    }
});

.cleanUp()

描述:清除表单中的全部验证消息

示例

$('#form1').validator('cleanUp');

.destroy()

描述:销毁表单验证实例

示例

$('#form1').validator('destroy');
posted @ 2018-05-04 14:28  心无引擎,眼无流派  阅读(292)  评论(0编辑  收藏  举报