如何设置单个字段使用 Email 或 Phone 验证？

Question

我正在使用 jquery-validate 插件来执行客户端验证，我想要完成的是根据另一个输入为电子邮件或 phone 号码提供单个输入规则。

如果第二个输入的值为 "email"，则电子邮件的规则设置为 true，phoneNumber 的规则设置为 false，反之亦然。

我面临的问题是无论我做什么，验证总是要求提供有效的电子邮件地址。

我没有使用电子邮件或 phone 的内置规则，我自己做了一些，它们是：

jQuery.validator.addMethod( "phoneNumber", function( phone_number, element ) {
            return this.optional( element ) || phone_number.length > 9 &&
                phone_number.match( /^[0-9]{7}|[0-9]{10}|\([0-9]{3}\)[0-9]{7}|\([0-9]{3}\)[\s\-]{1}[0-9]{3}[\s\-]{1}[0-9]{4}|[0-9]{3}[\s\-]{1}[0-9]{3}[\s\-]{1}[0-9]{4}$/ );
        }, 'Enter a valid phone number');

jQuery.validator.addMethod( "emailAddress", function( email, element ) {
            return this.optional( element ) ||
                email.match( /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/ );
        }, 'Enter a valid e-mail address');

我分配规则的方式是：

$(`#input1`).rules('add', {
     required: function(element) {
          if($(`#input2`).val() != '') return true;

          return false;
     },
     emailAddress: function(element) {
          if($(`#input2`).val() == 'email') return true;

          return false;
     },
     phoneNumber: function(element) {
          if($(`#input2`).val() == 'phone') return true;

          return false;
     }
});

因此，仅当 input2 具有某些值（工作良好）时才需要该字段，但无论我 select 在 input2 上选择什么选项，验证总是失败并显示 'Enter a valid e-mail address'。

我预计当 input2 的值为 "email" 时验证失败并显示 'Enter a valid e-mail address' 并且当 input2 的值为 "phone" 时验证失败并显示'Enter a valid phone number'.

我做错了什么？

Answer 1

由于您要完全交换规则，我会编写一个处理程序，根据需要动态添加和删除规则。

$('#input2').on('keyup', function() {
    if ($(this).val() == 'phone') {
        $('#input1').rules('remove', 'emailAddress');
        $('#input1').rules('add', {
            phoneNumber: true
        });
    }
    if ($(this).val() == 'email') {
        $('#input1').rules('remove', 'phoneNumber')
        $('#input1').rules('add', {
            emailAddress: true
        });
    }
});

演示：jsfiddle.net/gk0e372j/

但是，当 #input2 字段中没有输入任何内容时，phone/email 字段 (#field1) 仍然是 required 并且会接受任何内容，因此您仍然需要决定你想如何处理那部分，比如你的默认位置是什么。否则，您没有显示 HTML，也没有解释为什么要使用 .rules() 来声明这些。

除了在 .validate() 方法中声明所有内容并使用 depends 选项外，这是相同的逻辑。

$('#myform').validate({ 
    rules: {
        input1: {
            required: true,
            phoneNumber: {
                depends: function(element) {
                    return ($('#input2').val() === 'phone') ? true : false;
                }
            },
            emailAddress: {
                depends: function(element) {
                    return ($('#input2').val() === 'email') ? true : false;
                }
            }
        }
    }
});

演示 2：jsfiddle.net/wnpxh9cm/

如何设置单个字段使用 Email 或 Phone 验证？

How to set a single field to use Email or Phone validation?

javascript

jquery

jquery-validate