jQuery验证:需要有效的电话或有效的电子邮件

问题描述 投票:4回答:3

使用jQuery验证的第一天,但​​不是jQuery的第一天。很简单的问题:我有三个文本输入:姓名,电话和电子邮件。我想要名字(没有汗水)和EITHER手机或电子邮件,并确保输入在EITHER手机或电子邮件中有效。我试过这个:

$(document).ready(function() {
$("#contactForm").validate({
    debug:true,
    rules: {
        name: {
            required: true
        },
        email: {
            email:true,
            required: function(element){
                !$("#phone").valid();   
            }
        },
        phone: {
            phoneUS: true,
            required: function(element){
                !$("#email").valid();   
            }
        }
    },
    messages: {
        name: "Please specify your name",
        email: {
            required: "Please enter a valid email"
        },
        phone: "Please enter a 10 digit phone number"
    }
});

});

但它失败了,因为每个有效性检查调用另一个,无限递归并崩溃浏览器。

必须有一些简单的方法来做到这一点,但我已经花了将近两个小时,它逃脱了我:(

jquery validation
3个回答
2
投票

您可以创建自己的方法

$.validator.addMethod(
    "email_or_phone_number", 
    (value, element) => {
        this.optional(element) || /*is optional*/
        /^\d{10,11}$/.test(value) || /*is phone number*/
        /\S+@\S+\.\S+/.test(value) /*is email*/
    },
    "Please enter either phone number or e-mail"
);

现在您可以使用方法“email_or_phone_number”对于multidata案例:

<input type="text" class="{email_or_phone_number:true}" value="" />

您可以根据自己的需要在方法中更改正则表达式


0
投票

好的,超级简单的解决方案,忘了早点发布 - 拦截表单提交,先手动验证,然后触发插件验证。这是一个示例,需要选择n个复选框之一(根据实际项目进行调整,因此可能有一些拼写错误,但是你得到了jist):

(document).ready(function() {
       // on form submission
       $('form#signup').submit(function() {
                // make sure a checkbox is selected
                var checked = false;
                $('input.checkboxGroupMember').each(function(index) {
                    if ($(this).attr('checked')) {
                        checked = true;
                    }
                });
                if (checked == false) {
                    // do whatever to handle the failure here
                    $('div#feedback').html('Please select a checkbox');
                    return false;
                } else {
                    $('form#signup').validate();
                }

            });

            // once a checkbox is selected, clear feedback
            $('form input.checkboxGroupMember').change(function(index) {
                if ($(this).attr('checked')) {
                    $('div#feedback').empty();
                }
            });

            $('form#signup').validate();
        });

可以轻松调整以处理您不希望通过jQuery验证插件执行的任何验证。


0
投票

这是一个老问题,现在可用的更好的解决方案是jQuery Groups。 Example of jQuery Groups。验证将如下所示

$( "#myform" ).validate({
  rules: {
    mobile_phone: {
      require_from_group: [1, ".phone-group"]
    },
    home_phone: {
      require_from_group: [1, ".phone-group"]
    },
    work_phone: {
      require_from_group: [1, ".phone-group"]
    }
  }
});

您的三个字段都将具有class =“phone-group”。

确保包含组验证所需的additional-methods.min.js。

© www.soinside.com 2019 - 2024. All rights reserved.