2017-04-19 136 views
1

我已经为JQuery验证插件添加了一个自定义方法,并且在浏览了许多问题后,我在这里和其他页面上找不到它。JQuery验证插件的自定义方法不起作用

我没有输入自定义电话号码字段时收到一条错误消息,但是当我输入例如字母“A”时,表单确实通过。

我该如何解决这个问题?

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <meta charset="ISO-8859-1"> 
 
\t \t <title>Insert title here</title> 
 
\t </head> 
 
\t <body> 
 
\t \t <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script> 
 
\t \t <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
\t \t <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script> 
 

 
\t \t <form action="" id="registration-form"> 
 
\t \t \t <p> 
 
\t \t \t  Firstname 
 
\t \t \t  <input name="firstname" data-validation="required" 
 
\t \t \t \t \t data-validation-length="1-30" 
 
\t \t \t \t \t data-validation-error-msg="Firstname has to be an alphabetical value (1-30 chars)"> 
 
\t \t \t </p> 
 
\t \t 
 
\t \t \t <p> 
 
\t \t \t  Prefix 
 
\t \t \t  <input name="prefix" data-validation="required" 
 
\t \t \t \t \t data-validation-length="1-20" 
 
\t \t \t \t \t data-validation-error-msg="Prefix has to be an alphabetical value (1-20 chars)"> 
 
\t \t \t </p> 
 
\t \t 
 
\t \t \t <p> 
 
\t \t \t  Lastname 
 
\t \t \t  <input name="lastname" data-validation="required" 
 
\t \t \t \t \t data-validation-length="1-50" 
 
\t \t \t \t \t data-validation-error-msg="Lastname has to be an alphabetical value (1-50 chars)"> 
 
\t \t \t </p> 
 
\t \t 
 
\t \t \t <p> 
 
\t \t \t  Company 
 
\t \t \t  <input name="company" data-validation="required" 
 
\t \t \t \t \t data-validation-length="1-50" 
 
\t \t \t \t \t data-validation-error-msg="Company has to be an alphabetical value (1-50 chars)"> 
 
\t \t \t </p> 
 
\t \t 
 
\t \t \t <p> 
 
\t \t \t  Phonenumber 
 
\t \t \t \t <input name="phonenumber" data-validation="required phonenumber" 
 
\t \t \t \t \t data-validation-error-msg="This is not a valid phonenumber"> 
 
\t \t \t </p> 
 
\t \t 
 
\t \t  <p> 
 
\t \t \t  E-mail 
 
\t \t \t  <input name="mail" data-validation="email" 
 
\t \t \t \t \t data-validation-error-msg="E-mail has to be a valid email"> 
 
\t \t \t </p> 
 
\t \t 
 
\t \t \t <p> 
 
\t \t \t  <input value="Validate" type="submit"> 
 
\t \t \t  <input value="Reset form" type="reset"> 
 
\t \t \t </p> 
 
\t \t </form> 
 
\t \t 
 
\t \t <script> 
 
\t \t \t $(document).ready(function() { 
 
\t \t \t \t $.validator.addMethod('phonenumber', function (value, element) { 
 
\t \t \t \t  return this.optional(element) || /^(\+91-|\+91|0)?\d{10}$/.test(value); 
 
\t \t \t \t }, "Please enter a valid phone number"); 
 
\t \t \t }); 
 
\t \t \t 
 
\t \t \t $.validate({ 
 
\t \t \t 
 
\t \t \t }); 
 
\t \t </script> 
 
\t </body> 
 
</html>

+0

你的正则表达式都不尽如人意。在这篇文章http://stackoverflow.com/questions/19840301/jquery-to-validate-phone-number你有几个例子。尝试使用它们。祝你好运! – Antonio682

回答

0

见下面的代码。我修改,使其更易于使用:

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <meta charset="ISO-8859-1"> 
 
\t \t <title>Insert title here</title> 
 
\t </head> 
 
\t <body> 
 
\t \t <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
 
\t \t <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script> 
 

 
\t \t <form action="" id="registration-form"> 
 
\t \t \t <p> 
 
\t \t \t  Firstname 
 
\t \t \t  <input name="firstname" class="required validate[required]" minlength="1" manlength="30" > 
 
\t \t \t </p> 
 
\t \t 
 
\t \t \t <p> 
 
\t \t \t  Prefix 
 
\t \t \t  <input name="prefix" class="required validate[required]" minlength="1" manlength="20"> </p> 
 
\t \t 
 
\t \t \t <p> 
 
\t \t \t  Lastname 
 
\t \t \t  <input name="lastname" class="required validate[required]" minlength="1" manlength="50"> </p> 
 
\t \t 
 
\t \t \t <p> 
 
\t \t \t  Company 
 
\t \t \t  <input name="company" class="required validate[required]" minlength="1" manlength="50"> </p> 
 
\t \t 
 
\t \t \t <p> 
 
\t \t \t  Phonenumber 
 
\t \t \t \t <input name="phonenumber" class="required validate[required] phonenumber"> </p> 
 
\t \t 
 
\t \t  <p> 
 
\t \t \t  E-mail 
 
\t \t \t  <input name="mail" class="email"> </p> 
 
\t \t 
 
\t \t \t <p> 
 
\t \t \t  <input value="Validate" type="submit"> 
 
\t \t \t  <input value="Reset form" type="reset"> 
 
\t \t \t </p> 
 
\t \t </form> 
 
\t \t <script> 
 
\t \t \t 
 
\t \t \t $(document).ready(function() { 
 
\t \t \t \t $.validator.addMethod('phonenumber', function (value, element) { 
 
\t \t \t \t  return this.optional(element) || /^(\+91-|\+91|0)?\d{10}$/.test(value); 
 
\t \t \t \t }, "Please enter a valid phone number"); 
 

 
\t \t \t \t $(document).on('submit', 'form#registration-form', function(event) { 
 
\t \t \t \t \t if(!$(this).valid()){ 
 
\t \t \t \t \t \t return false; 
 
\t \t \t \t \t } 
 
\t \t \t \t }); 
 
\t \t \t }); 
 
\t \t </script> 
 
\t </body> 
 
</html>

+0

谢谢!电话号码部分正在工作,包括错误消息。我是否需要制作自定义方法来获取名字等的错误消息,或者是否还有我所知的以前的“data-validation-error-msg”的替代方法? – Kevin

+0

您不需要为不同方面的每个输入字段添加自定义方法。他们中的大多数都被包含在图书馆中,并且只有一个班级名称。作为要求的字段的例子,我们只需要在input中输入'required'类。 'email'也一样。你可以在这里找到类的列表。 https://jqueryvalidation.org/documentation/ – Mufi

+0

对于每个输入字段的自定义消息,您可以在单个验证方法中为每个输入字段提供自定义错误消息。这个答案将帮助你设置它。 http://stackoverflow.com/questions/2457032/jquery-validation-change-default-error-message/2457053 – Mufi