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

Question

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

我已经研究过但找不到任何教程或演示代码来展示如何实现这个特定的东西，因此我不得不提出这个问题。

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

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

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

所以我想要一些像常见的 data-* 属性（如果它可用），它可以在特定的 html 形式对我来说是可行的，因为我不需要像这样根据不同的形式键入不同的代码 $.validate({form : '#LoginForm'}); 因为上面的通用方法对我来说是可行的..

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

我们将不胜感激任何帮助。

谢谢。

Answer 1

最终我轻松解决了这个问题，感谢 @mplungjan 为我提供了 link 并向我展示了 way 如何完成这个。

我只是去了这里的图书馆 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" custom 需要放在那里进行自定义验证。

然后我把

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

它检查有效的 phone 号码，最后但并非最不重要的一点是，我已经将两个不同的验证错误消息显示给 required [=13= 的用户] 和 无效数字 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 表单验证只允许标准美国号码

jquery form validation allow only standard USA numbers

javascript

jquery

jquery-form-validator