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

Question

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

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

有人可以指导我或告诉我一些代码，如果可能的话，如何使用data-*属性在html标签(即<input data-validation="creditcard" data-validation-allowing="visa, mastercard, amex">)或利用这个插件的帮助下以任何其他方式实现这一点。

我试图利用这个配置回调，但我有点困惑如何利用这一点，因为我有多个形式，我只把这段代码在我的common.js文件的所有形式的工作良好使用的所有形式。

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

所以我想要的东西像共同的数据-*属性(如果它可用)，它可以在一个特定的html形式，这对我来说是可行的，因为我不需要输入不同的代码基于不同的形式像这样的$.validate({form : '#LoginForm'});作为上面的常见方法对我来说是可行的。

有人能帮我实现这个东西吗?

任何帮助都将非常感激。

谢谢。

Answer 1

最终我已经整理了这件事很容易感谢@mplungjan谁给我提供了一个链接，并向我展示了方式如何完成这一点。

我只是去了这里的库默认验证自定义，我看到他们实际上提供了使正则表达式验证的工具。

我搜索regex检查美国手机号码电话号码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="[phone]" 
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*"

检查有效的电话号码，最后但并非最不重要的是，我已经把两个不同的验证错误消息显示给用户所需的 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 [phone]
1.234.567.8901
1/234/567/8901
12345678901
1-234-567-8901 ext. 1234
([phone]
*/
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