Question

到目前为止，我发现这个插件很好Jquery Form Validator，因为到目前为止它已经满足了我的所有要求，但我仍然坚持为用户设置验证，只输入美国手机号码格式之类的东西这 1-（XXX）-XXX-XXXX 。它应该只允许这个数字输入，否则它应该不接受，并且应该显示表单验证错误。

我已经研究但无法找到任何教程或演示代码，它们展示了如何实现这一特定事物，因此我不得不提出这个问题。

有人可以指导我或给我一些代码，如果可能的话，如何使用html标签中的数据 - * 属性（即<input data-validation="creditcard" data-validation-allowing="visa, mastercard, amex">）或任何其他方式帮助我们这个插件..

我正在尝试使用这个Configuration Callbacks，但我有点困惑如何利用它，因为我有多种形式，我只把这个代码放在我的 common.js 文件中适用于所有表格的表格。

$.validate({
             modules : 'security, file'
        });

所以我想要一些像常见的数据 - * 属性（，如果它的可用），它可以在一个parcular html形式工作，这对我来说是可行的，因为我没有需要根据不同的形式输入不同的代码，如上所述[{1}}，因为上面的常用方法对我来说是可行的。

有人可以帮助我实现这个目标吗？

任何帮助都将受到高度赞赏。

感谢。

Answer 1

最终，由于 @mplungjan 为我提供了一个链接并向我展示了方式如何实现这一目标，我已经轻松解决了这个问题。

我只是去了图书馆Default validation custom，我发现他们实际上正在提供在旅途中进行正则表达式验证的工具..

我搜索了正则表达式查看美国手机号码Phone Number Regex US

然后在找到正则表达式后，我使用了这个HTML代码，

<input name="user_mobile_no" class="form-control error" placeholder="Mobile No." 
data-validation="required custom" 
data-validation-error-msg-required="Please Enter Mobile Number" 
data-validation-regexp="\D*([2-9]\d{2})(\D*)([2-9]\d{2})(\D*)(\d{4})\D*" 
data-validation-error-msg-custom="Invalid Mobile Number (i.e. +1 XXX-XXX-XXXX)" 
maxlength="50" id="user-mobile-no" value="+1 215-555-1212" 
style="border-color: rgb(185, 74, 72);" type="text">

而且瞧瞧，它的工作。

请注意我上面提到的这些行，data-validation="required custom" 自定义需要放在那里进行自定义验证。

然后我把

data-validation-regexp="\D*([2-9]\d{2})(\D*)([2-9]\d{2})(\D*)(\d{4})\D*"

检查有效的电话号码，但最后但并非最不重要，我已向用户显示两条不同的验证错误消息必需 data-validation-error-msg-required="Please Enter Mobile Number"和无效号码 data-validation-error-msg-custom="Invalid Mobile Number (i.e. +1 XXX-XXX-XXXX)"。

谢谢大家的支持。我希望它可以帮助那些需要处理类似事情的人。真的很感激。

谢谢。

Answer 2

/*
It works for these number formats:
1-234-567-8901
1-234-567-8901 x1234
1-234-567-8901 ext1234
1 (234) 567-8901
1.234.567.8901
1/234/567/8901
12345678901
1-234-567-8901 ext. 1234
(+351) 282 433 5050
*/

jQuery.validator.addMethod("usPhoneFormat", function (value, element) {
    return this.optional(element) || /^\(*\+*[1-9]{0,3}\)*-*[1-9]{0,3}[-. /]*\(*[2-9]\d{2}\)*[-. /]*\d{3}[-. /]*\d{4} *e*x*t*\.* *\d{0,4}$/.test(value);
}, "Enter a valid phone number.");


$(document).ready(function(){   
  $("#sampleForm").validate({
    rules: {
      phoneNumberRegEx: {
        usPhoneFormat: true,
        required: true
      }
    },
    submitHandler: function (form) {
      alert("submitted.");
    }
  });
  $(".phone").mask("0-000-000-0000", {placeholder: "_-___-___-____"});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="http://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js"></script>
<form id="sampleForm" method="POST">
    <fieldset>
        <label for="phoneNumberRegEx">Phone: </label>
        <input type="text" id="phoneNumberRegEx" name="phoneNumberRegEx" class="phone" />
    </fieldset>
    <input type="submit" value="Submit" />
</form>

Answer 3

如果您想要使用特定系列代码进行高级验证，您可以尝试使用此软件包中的数据https://www.npmjs.com/package/dialcodes

jquery表单验证仅允许标准美国号码

3 个答案: