0

我正在使用 jquery，我正在尝试使用 ### ### #### 格式验证手机号码或家庭号码。# 作为数字的占位符。

目前我正在使用数字，但这会给空格带来问题，并且我正在使用 minlength 10 因为所有 SA 数字都是最少 10 位数字。

我的代码已经如下所示：

// Validation of Form
function validateForm() {
    $('#frmMain').validate({
        rules: { 
                 TelNumber: { required: true, number: true, minlength: 10 }
                },
        messages: {
                TelNumber: { required: 'Tel number Required' }
               },

        submitHandler: function (form) {
            $('#btnSubmit').click();

        }
    });
}

在这里我找到了一个美国电话号码的附加信息，如果有人可以告诉我美国电话号码的外观，我可以编辑这个：

jQuery.validator.addMethod("phoneUS", function(phone_number, element) {
    phone_number = phone_number.replace(/\s+/g, ""); 
    return this.optional(element) || phone_number.length > 9 &&
        phone_number.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/);
}, "Please specify a valid phone number");

$("#myform").validate({
  rules: {
    field: {
      required: true,
      phoneUS: true
    }
  }
});
4

3 回答 3

2

插件作者的页面有一个指向“附加验证方法”包的链接（指向源的热链接），其中包括“phoneUS”验证规则。只需将其放入，您就可以开始了。

如果您想自定义可接受的模式，该文件还包含一个“模式”规则，允许您通过指定正则表达式进行验证。事实上，这也是“phoneUS”规则的工作原理：通过测试表达式的输入

/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/
于 2012-05-17T09:55:59.883 回答
1 
jQuery.validator.addMethod("phoneSA", function (phone_number, element) {
    phone_number = phone_number.replace(/\s+/g, "");
    return this.optional(element) || phone_number.length > 9 && 
        phone_number.match(/^(0-?)?(\([0-9]\d{2}\)|[0-9]\d{2})-?[0-9]\d{2}-?\d{4}$/); //(0-?) = 0, ([0-9]\d{2}\) = 3 digits from 0-9 , d{4} 4 didgets, $ end of number
}, "Please specify a valid phone number");
于 2012-05-17T10:24:35.030 回答
0

这是我正在使用的脚本。根据您的需要修改代码。iderrorContainer用于显示您的错误消息。

<script type="text/javascript">
   $().ready(function() {
    $("#frmMain").validate({
        errorLabelContainer:'#errorContainer',
        showErrors: function(errorMap, errorList) {
            if(errorList.length)
            {
                $('#errorContainer').html(errorList[0]['message']);
            }
        },
            highlight:function(element,errorClass){
            $(element).parent('td').addClass('error');
            },
        unhighlight:function(element,errorClass){
                $(element).parent('td').removeClass('error');
        },
        rules: {
                        TelNumber: {
                required: true,
                number:true 
            }
                    },
            messages: {
                TelNumber: "Please enter a valid phone number",
            }
        });
   });
</script>

在尝试执行此操作之前，请确保您的 jQuery 文件已成功加载并正常工作。

我会建议尝试使用一些 UI 进行验证，这将很容易实现。

于 2012-05-17T09:56:55.900 回答