以下是JSFIDDLE的链接。
您好
我正在学习JQuery验证器插件及其API。我几乎在那里，但似乎无法找到关于我想实现的解决方案的一个可靠的例子。我做了很多在线搜索，发现了点点滴滴，但没有什么可以解释这一点。
我有一个包含以下字段的简单表单：
目前，这些字段正在验证，没有任何自定义方法或错误消息。因此，如果表单提交空字段，则会弹出“required *”。
我想要做的是验证一个字段，而不仅仅是检查字段是否为空/空。例如：
名字：
电话：
我是实现自定义验证器方法的新手，我不知道如何显示正确的错误消息。因此，如果电话字段不是空白而是容器非数字字符，我想标记它并显示该字段仅接受数字字符的错误消息。
目前，我在验证器的消息对象中有错误消息“required *”，我不知道如何在粒度级别上实现错误消息。
我为这么长时间的解释道歉。如果有人能指出我正确的方向，我将非常感激。谢谢
以下是JSFIDDLE的链接。
<div class="wrapper">
<form id="contactForm" action="" method="post" enctype="multipart/form-data">
<div class="fieldGroup">
<!-- FIRST NAME --->
<lable for="firstname">First Name: </label>
<input type="text" id="firstname" name="firstname" size="25" maxlength="25" >
</div>
<!-- LAST NAME -->
<div class="fieldGroup">
<lable for="lastname">Last Name: </label>
<input type="text" id="lastname" name="lastname" size="25" maxlength="25" >
</div>
<!-- EMAIL -->
<div class="fieldGroup">
<lable for="email">Email: </label>
<input type="text" id="email" name="email" size="25" maxlength="40" >
</div>
<!-- PHONE -->
<div class="fieldGroup">
<lable for="lastname">Phone: </label>
<input type="text" id="phone" name="phone" size="12" maxlength="12" >
xxx-xxx-xxxx
</div>
<div class="fieldGroup">
<input type="submit" id="SubmitBtn" value="Submit" >
<input type="reset" id="ResettBtn" value="Reset" >
</div>
</form>
</div>
JAVASCRIPT
(function($,W,D)
{
var JQUERY4U = {};
JQUERY4U.UTIL =
{
setupFormValidation: function()
{
//form validation rules
$("#contactForm").validate({
rules: {
firstname: {
required: true,
chkData: true
},
lastname: {
required: true,
minlength: 2,
maxlength: 15
},
address1:{
required: true,
minlength: 8,
maxlength: 30
},
city:{
required: true,
minlength: 8,
maxlength: 25
},
state:{
required: true
},
zipcode:{
required: true,
minlength: 5,
maxlength: 10
},
phone: {
required: true,
minlength: 10,
maxlength: 12
},
email:
{
required: true,
email: true
}
},
messages: {
firstname: "required *",
lastname: "required *",
address1: "required *",
city: "required *",
state: "required *",
zipcode: "required *",
phone: "required *",
email: "required *",
},
submitHandler: function(form) {
form.submit();
}
});
}
}
//when the dom has loaded setup form validation rules
$(D).ready(function($) {
$.validator.addMethod("chkData",
function(value, element){
alert(value);
},"SORRY");
JQUERY4U.UTIL.setupFormValidation();
});
})(jQuery, window, document);
答案 0 :(得分：1)
您的代码稍微复杂一些。
$(document).ready(function () {
$("#contactForm").validate({
rules: {
firstname: {
required: true,
alphanumeric: true
},
lastname: {
required: true,
minlength: 2,
maxlength: 15
},
address1: {
required: true,
minlength: 8,
maxlength: 30
},
city: {
required: true,
minlength: 8,
maxlength: 25
},
state: {
required: true
},
zipcode: {
required: true,
minlength: 5,
maxlength: 10
},
phone: {
required: true,
phoneUS: true
},
email: {
required: true,
email: true
}
},
messages: {
firstname: {
required: "required *",
alphanumeric: "custom alphanumeric message"
},
lastname: "required *",
address1: "required *",
city: "required *",
state: "required *",
zipcode: "required *",
phone: "required *",
email: "required *",
}
});
});
DEMO：http://jsfiddle.net/7uDXQ/
备注：
1） alphanumeric和phoneUS规则要求包含additional-methods.js file。
2）
“目前，我在
required *内有错误消息messages验证器的对象，我不知道如何实现错误 粒度级别的消息。“
自定义消息只是按照与rules:类似的格式实现：
messages: {
firstname: {
required: "custom required *",
alphanumeric: "custom alphanumeric message"
},
}
否则，如果你只这样做......
messages: {
firstname: "custom required *",
}
然后firstname字段上所有规则的所有消息将共享此相同的自定义消息。
3）除非您需要在有效表单上执行某些操作，否则您不必指定submitHandler回调函数，例如ajax。否则，默认情况下，表单只会在有效表单上执行正常submit。将我的jsFiddle中的代码与我上面发布的代码进行比较。
4）没有chkData这样的规则，所以我删除了它。如果这是您的自定义规则，请按照我上面的第2项应用自定义消息。