如何在 jquery 验证中使用移动模式

Question

我正在使用 jquery 格式化程序为我们的手机号码强制设置模式

$('.mobile_number').formatter({
      'pattern': '+{{99}}-{{999}}-{{999}}-{{9999}}',
      'persistent': true
});

如何添加到 jquery 验证规则。因为当字段为空时。我只能设置需要的。

$('.required').each(function() {
        $(this).rules('add', {
            required: true,
            messages: {
                required:  "Required"
            }
        });
});

Answer 1

Read the documentation. There is a pattern rule within jQuery Validate. However, you'll need to include the additional-methods.js file.

包含后，可以通过 HTML5 pattern 属性选择性地声明 pattern。否则，它可以使用 .validate() 或 .rules() 声明，就像任何其他规则一样。

顺便说一句 - additional-methods.js 文件已经包含您可以使用的各种 phone 数字格式的规则。

就此代码而言...

$('.required').each(function() {
    $(this).rules('add', {
        required: true,
        messages: {
            required:  "Required"
        }
    });
});

这完全是多余和不必要的。您正在将所有元素与 class="required" 匹配并以编程方式应用 required 规则。但是，插件自动将 required 规则应用于任何具有 class="required" 的表单元素。

Answer 2

Fiddle - https://jsfiddle.net/7nd4ehhq/

<form id="myform">
  <input type="text" id="phoneUS" name="phoneUS">
  <input type="submit" value="submit">
</form>

您可以尝试如下定义自定义函数：

$(document).ready(function(){
  $("#myform").validate({
    rules:{
      phoneUS:
      {
        required:true,
        phoneUS:true
      }
    }  
 });

 $.validator.addMethod( "phoneUS", function( phone_number, element ) {
    return phone_number.match(/^\+[1-9]{2}-[0-9]{3}-[0-9]{3}-[0-9]{4}$/)
 }, "Please specify a valid phone number" );
});

请注意：

1) jquery 验证插件已经定义了额外的验证方法来验证 USphone 号码等等。参考https://github.com/jzaefferer/jquery-validation/tree/master/src/additional

2) 在此示例中，我根据您期望的格式放置了正则表达式，但可以对其进行修改以更正确地验证 phone 数字。

如何在 jquery 验证中使用移动模式

how to use mobile pattern in jquery validation

jquery

jquery-validate