Question

我已经阅读了所有Jquery Validate文档，但我仍然不清楚如何拥有自己的自定义规则来验证输入。

HTML

<form id="myForm">
   <input type="text" name="firstName" class="required" />
   <input type="text" name="lastName" class="required" />
   <input type="text" name="phone" class="phone" />
</form>

JQuery的/使用Javascript

$("#myForm").validate({
   rules: {
      // what do I put here so that an input with class phone is validated?
   },
   messages: {
      // what do I put here so that this message is displayed if .phone is invalid?
   }
});

从我读过的内容可以建立我自己的规则，这样不仅需要电话号码，而且还需要10个数字，如果不是，我可以指定要显示的消息。

上面的JS是我基本上直接从文档中尝试但它不起作用。永远不会验证该字段，并且永远不会显示该消息。

感谢任何帮助

Answer 1

你可以这样做：

rules: {
    name1: {
        required: true,
        ValidCharsGeneral: true,
        minlength: 2,
        maxlength: 50
    },
    name2: {
        required: true,
        ValidCharsGeneral: true,
        minlength: 2,
        maxlength: 50
    }
},
messages: {
    name1: {
        required: "This information is required",
        minlength: "Username must be at least 6 characters long",
        maxlength: "Username must be at most 50 characters long",
        remote: "Username is already in use"
    },
    name2:{
        required: "This information is required",
        email: "Email address is not valid",
        remote: "Email address is already in use"
    }
}

Answer 2

没有默认的“phone”验证器，但additional-methods.js文件包含美国和英国电话号码模式的验证器。您可以找到links to that file here。

您可以在此处运行此代码：http://jsfiddle.net/iknowkungfoo/XCuPj/

<强> HTML

<form id="myForm">
   <input type="text" name="firstName" class="required" /><br />
   <input type="text" name="lastName" class="required" /><br />
   <input type="text" name="phone" class="phoneUS digits" maxlength="10" /><br />
   <input type="submit" />
</form>

<强>的JavaScript

$('#myForm').validate({
    messages: {
        phone: "Invalid phone number, please correct this."
    }
});

通过类属性，我已指定手机字段与“phoneUS”和“digits”验证匹配。我还指定该字段的“maxlength”为10.然后，在JavaScript代码中，我指定了当字段名称 phone 验证失败时要显示的消息。

或者，我可以为与电话字段相关联的每个验证器指定一条消息。

备用JavaScript http://jsfiddle.net/iknowkungfoo/dvfJu/2/

$('#myForm').validate({
    messages: {
        phone: {
            phoneUS: "phoneUS failed",
            digits: "digits failed"
        }
    }
});

FWIW，如果您使用 phoneUS 验证器并将 maxlength 指定为10，那么电话号码各部分之间就没有空格。鉴于 phoneUS 验证器不允许字母数字字符（短划线除外），数字验证器是不必要的。

使用Jquery Validate插件的自定义规则

2 个答案: