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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16298931/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 16:52:57  来源:igfitidea点击:

How to validate phone number and email using jquery.validate.min.js?

javascriptjquery

提问by Chris

I have managed to adapt a jquery form validation example to work with my site, but I don't know how to make sure it's just numbers entered in the phone number field and just email addresses entered in the email field.

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

Please can anyone help?

请问有人可以帮忙吗?

Also wondering if there is anything that could be improved?

也想知道有什么可以改进的吗?

<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>

EDIT:

编辑:

There are already validation methods in the example but it is to not accept special characters. I just need to understand how to change the /^[A-Za-z\d=#$%@_ -]+$/ to email and number validation.

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

回答by Arun P Johny

There are already emailand phonerules present in the validation framework

目前已经emailphone规则存在于验证框架

<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>

回答by Levi Kovacs

I would suggest to construct a Regular Expression and match that to what the user enters and use the match() function.

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

For more info on how to construct the right regular expression (depending on your locale) go to RegExp tutorial.

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

回答by Er.KT

I have UK phone number validation

我有英国电话号码验证

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
                    });