jquery 自定义验证_jQuery自定义验证规则– fieldPresent

最新推荐文章于 2024-10-14 23:40:45 发布

dingshi7798

最新推荐文章于 2024-10-14 23:40:45 发布

阅读量94

点赞数

文章标签： js vue python jquery javascript ViewUI

原文链接：https://www.sitepoint.com/jquery-custom-validation-rule-fieldpresent/

版权

jquery 自定义验证

这篇文章向您展示如何使用jQuery.validate.js插件向表单添加自定义验证规则。这篇文章仅需2分钟即可支持使用jQuery进行安装程序表单验证。我使用$ .validator.addMethod（）函数来设置自定义验证规则。 我在下面添加了一个现场演示 。

更新：2013年6月30日：添加了自定义验证规则以用于生日。

例子

下面的示例显示了一个自定义验证规则，该规则检查名称和电子邮件是否都存在。如果存在名称，则必须存在电子邮件，反之亦然。

左字段验证示例。
b5f8ddf05cc9e0d77165aab60fe3adec [1]

正确字段验证示例。
4f5d3b79c2a2c8284b4b23b785e4f893

两者都作用于多个对的示例。
fb3c37c4856ac43787f233f40d40a973

现场演示

在jsfiddle中编辑

JQUERY

文章结尾处有此片段的修补版本，它修复了一些跨浏览器和验证递归的问题。

$.validator.addMethod("fieldPresent", function (value, element, options)
{
    //we need the validation error to appear on the correct element
    var targetEl = $('input[name="'+options.data+'"]'),
        bothEmpty = (value == targetEl.val() == '');

    //trigger error class on target input
    (bothEmpty) ? targetEl.addClass('error') : targetEl.removeClass('error');
    return !bothEmpty;
},
    "Friend's name and email required."
);

$('#myForm').validate({
    onkeyup: true,
    rules: {
        "friend1-name": { "fieldPresent": { data: "friend1-email" } },
        "friend1-email": { "fieldPresent": { data: "friend1-name" } }             
    },
    submitHandler: function(form) {

        console.log('passed validation.');
        //submit form handler
    }
});

HTML

  
  
    
   
   
        
    
    Friend's name
        
    
    
            
     
     
        
    
    
    
   
   
    
   
   
        
    
    Email Address

CSS

.control-group {
    width: 100%;
}

.control-group-inner {
    width: 50%;
    float: left;
    display: inline-block;
}

如果上面的jQuery代码段不起作用，请使用较新的版本来删除一些错误。有点想避免setTimeouts，因为它们是不好的编码习惯……

//custom validation: each friend entered must have an email and a name
$.validator.addMethod("fieldPresent", function (value, element, options)
{
    //we need the validation error to appear on the correct element
    var targetEl = $('input[name="'+options.data+'"]'),
        targetEmpty = (targetEl.val() == ''),
        elEmpty = (value == ''),
        bothEmpty = elEmpty && targetEmpty;

    //trigger error class on target input
    if (!bothEmpty && targetEmpty)
    {
        //error msg doesn't exist yet so wait...
        setTimeout(function()
        {
            if (targetEl.closest('.control-group-inner').find('label.fieldPresentError').length == 0)
            {
                targetEl.addClass('error');
                if (!elEmpty) $(element).closest('.control-group-inner').find('label.fieldPresentError').remove();
                targetEl.closest('.control-group-inner').find('label.fieldPresentError').remove();
                targetEl.after("Friend's name and email required. ");
            }
        }, 500);
    }

    return (bothEmpty || !elEmpty);
},
    "Friend's name and email required."
);

验证出生日期（3个输入）

如何验证dob，该dob包含日，月和年的3个输入。您需要添加一个自定义验证规则。

//custom validation for dob
$.validator.addMethod("dobValid", function (value, element, options)
{
    //we need the validation error to appear on the correct element
    var day = $('input[name="dob-day"]'),
        month = $('input[name="dob-month"]'),
        year = $('input[name="dob-year"]'),
        anyEmpty = ( day.val() == '' || month.val() == '' || year.val() == '' );

    if (anyEmpty) {
        day.add(month).add(year).addClass('error');
    }
    else {
        day.add(month).add(year).removeClass('error');
    }

    return !anyEmpty;
},
    "Please enter your date of birth."
);


...


$form.validate({
    rules: {

        ...

        "dob-year": { required: "required", dobValid: true }

        ...

    },
    messages: {

        ...

    },
    submitHandler: function(form) {

        ...
        
    }
});