Question

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

如果第二个输入的值为“ email”，则电子邮件规则设置为true，phoneNumber规则设置为false和visceversa。

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

我没有使用电子邮件或电话的内置规则，而是自己制作了一些规则，这些是：

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具有一定的值（运行良好）时才需要该字段，但是无论我在input2上选择了什么选项，验证始终会失败，并显示“输入有效的电子邮件”地址'。

我希望当input2的值为“ email”时，验证失败，并显示“输入有效的电子邮件地址”；当input2的值为“ phone”时，验证失败，并显示“ Enter”有效的电话号码”。

我做错了什么？

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字段中未键入任何内容时，电话/电子邮件字段（#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/

如何设置单个字段以使用电子邮件或电话验证？

1 个答案: