javascript - 如何使用 jquery.validate.min.js 验证电话号码和电子邮件？

Question

我设法调整了一个 jquery 表单验证示例以与我的网站一起使用，但我不知道如何确保它只是在电话号码字段中输入的数字和在电子邮件字段中输入的电子邮件地址。

请问有人可以帮忙吗？

还想知道有什么可以改进的吗？

<script language="javascript" type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
<script>
$(function() {
   $( "#quickform" ).validate({
           rules: {
                   name: {
                       required: true
                   },
                   phone: {
                       required: true,
                       phonevalidation: true
                   },
                   email: {
                       required: true,
                       emailvalidation: true
                   },
                   enquiry: {
                       required: true
                   }

           },
           messages: {
                   name: {
                       required: "Please enter your name."                         
                   },
                   phone: {
                       required: "Please enter your phone number."                         
                   },
                   email: {
                       required: "Please enter your email address."                         
                   },
                   enquiry: {
                       required: "Please enter your enquiry."                         
                   }
           },
   });
   $.validator.addMethod("phonevalidation",
           function(value, element) {
                   return /^[A-Za-z\d=#$%@_ -]+$/.test(value);
           },
   "Please enter a valid phone number."
   );
   $.validator.addMethod("emailvalidation",
           function(value, element) {
                   return /^[A-Za-z\d=#$%@_ -]+$/.test(value);
           },
   "Please enter a valid email address."
   );
});
</script>

编辑：

示例中已经有验证方法，但不接受特殊字符。我只需要了解如何将 /^[A-Za-z\d=#$%@_ -]+$/ 更改为电子邮件和号码验证。

Answer 1

验证框架email中已经存在规则phone

<script language="javascript" type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
<script language="javascript" type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.js"></script>
<script>
$(function() {
    $( "#quickform" ).validate({
        rules: {
            name: {
                required: true
            },
            phone: {
                required: true,
                phoneUK: true //or look at the additional-methods.js to see available phone validations
            },
            email: {
                required: true,
                email: true
            },
            enquiry: {
                required: true
            }

        },
        messages: {
            name: {
                required: "Please enter your name."                         
            },
            phone: {
                required: "Please enter your phone number."                         
            },
            email: {
                required: "Please enter your email address."                         
            },
            enquiry: {
                required: "Please enter your enquiry."                         
            }
        },
    });

});
</script>

Answer 2

我建议构造一个正则表达式并将其与用户输入的内容相匹配并使用 match() 函数。

有关如何构建正确的正则表达式（取决于您的语言环境）的更多信息，请访问RegExp 教程。

Answer 3

我有英国电话号码验证

jQuery.validator.addMethod('phoneUK', function(phone_number, element) {
                        phone_number = phone_number.replace(/\s+/g, '');
                        return this.optional(element) || phone_number.match(/^(\+44\s?7\d{3}|\(?07\d{3}\)?)\s?\d{3}\s?\d{3}$/);
                    }, 'Please specify a valid phone number');


                    $('#inputTelephone').rules('add', {
                        required: true,
                        phoneUK: true
                    });