如何在带有 defaultValue 的可选字段上使用 jQuery Validator 自定义方法？

Posted 2023-03-15

【中文标题】如何在带有 defaultValue 的可选字段上使用 jQuery Validator 自定义方法？

【英文标题】：How to use jQuery Validator custom method on optional field with defaultValue?

【发布时间】：2011-12-04 23:10:48

【问题描述】：

我正在使用最新版本的 jQuery Validator plugin 以及 jQuery (1.6.2)。

在电话号码的可选字段中，我有一个defaultValue。

HTML：

<input type="text" class="autoclear blur" value="your telephone number" name="Phone" />

我根据this thread 安装了用于验证电话号码的自定义方法。这个想法是，即使该字段是可选的，我仍然想在输入文本时验证它。

jQuery/JavaScript：

$(document).ready(function() 

    var nameMsg = "Please enter your full name.",
        emailMsg = "Please enter your email address.",
        emailMsgV = "This is not a valid email address.",
        commentsMsg = "Please enter your comments.";

    $.validator.addMethod('phone', function (value, element) 
        return this.optional(element) || /^[01]?[- .]?\(?[2-9]\d2\)?[- .]?\d3[- .]?\d4$/.test(value);
, 'This is not a valid number.');

    $('#contactForm').validate(
        onkeyup: false,
        validClass: 'valid',
        rules: 
            Name: 
                required: true
            ,
            email: 
                required: true,
                email: true
            ,
            Phone: 
                required: false,
                phone: true
            ,
            Comments: 
                required: true
            
        ,
        messages: 
            Name: nameMsg,
            email: 
                defaultInvalid: emailMsg,
                required: emailMsg,
                email: emailMsgV
            ,
            Comments: commentsMsg
        ,
        success: function(error) 
            setTimeout(function()  // Use a mini timeout to make sure the tooltip is rendred before hiding it
                $('#contactForm').find('.valid').qtip('destroy');
            , 1);
        ,
        submitHandler: function(form) 
            $('#contactForm .autoclear').each(function() 
                if (this.value === this.defaultValue) 
                    this.value = '';
                
            );
            form.submit();
        ,
        errorPlacement: function(error, element) 
            $(element).filter(':not(.valid)').qtip( 
                overwrite: false,
                content: error,
                position: 
                    my: 'left center',
                    at: 'right center'                        
                ,
                show: 
                    event: false,
                    ready: true
                ,
                hide: false
            ).qtip('option', 'content.text', error);
         // closes errorPlacement
    ) // closes validate()    

); // closes document.ready()

问题是，因为我在这个可选字段上有一个defaultValue，所以它也得到了验证。

是否可以编辑phone 的自定义方法，使其在字段留空时忽略该字段上的defaultValue？

我尝试用if/then 包围正则表达式，但这似乎不起作用。

$.validator.addMethod('phone', function (value, element) 
    if (value != element.defaultValue)  
        return this.optional(element) || /^[01]?[- .]?\(?[2-9]\d2\)?[- .]?\d3[- .]?\d4$/.test(value);
    
, 'This is not a valid number');

在考虑了它的工作原理之后，我知道这是错误的方法......所以现在我迷路了。

【问题讨论】：

你看过 html5 的占位符属性了吗？ davidwalsh.name/html5-placeholder 显然，如果您不关心旧浏览器，这只是一个解决方案。

@AndrewWhitaker，这很酷，但是这个网站支持 IE 7。必须有一种方法来修改该正则表达式以通过 defaultValue，不是吗？

【参考方案1】：

看来你需要从你传递给addMethod的函数中返回something：

$.validator.addMethod('phone', function (value, element) 
    if (value != element.defaultValue)  
        return this.optional(element) || /^[01]?[- .]?\(?[2-9]\d2\)?[- .]?\d3[- .]?\d4$/.test(value);
    
    return true;
, 'This is not a valid number');

示例： http://jsfiddle.net/L3S9e/

【讨论】：

这行得通！谢谢！而且它现在对我来说似乎也更有意义了。

@Sparky672：没问题！实际上我什至不知道 defaultValue 属性的存在，所以谢谢你的好问题！

我简直不敢相信我没有意识到正则表达式返回的是真/假，而我的 if/then 只是完全阻止了它。顺便说一句：是的，“属性” ...jQuery used to refer to it as an "attribute"....