这是JSFIDDLE的链接。
你好
我正在学习 JQuery 验证器插件及其 API。我快到了，但似乎找不到关于我喜欢实施的解决方案的可靠示例。我做了很多在线搜索，找到了一些零碎的东西，但没有什么能很好地解释这一点。
我有一个包含这些字段的简单表单：
- 名
- 姓
- 电子邮件
- 电话
目前，正在验证这些字段，没有任何自定义方法或错误消息。因此，如果提交的表单带有空字段，则会弹出“必填 *”。
我想做的是验证一个字段，而不仅仅是检查它是否为空白/空。例如：
名：
- 字段不为空/空
- 字段不包含字母数字字符
电话：
- 字段不为空/空
- 字段仅包含数字字符
我在实现自定义验证器方法方面非常陌生，我不知道如何显示正确的错误消息。因此，如果电话字段不是空白而是容器非数字字符，我想标记它并显示该字段仅接受数字字符的错误消息。
目前，我在验证器的消息对象中有错误消息“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);