校验规则的提示
required: "必选字段",
remote: "请修正该字段",
email: "请输入正确格式的电子邮件",
url: "请输入合法的网址",
date: "请输入合法的日期",
dateISO: "请输入合法的日期 (ISO).",
number: "请输入合法的数字",
digits: "只能输入整数",
creditcard: "请输入合法的信用卡号",
equalTo: "请再次输入相同的值",
accept: "请输入拥有合法后缀名的字符串",
maxlength: jQuery.validator.format("请输入一个长度最多是 {0} 的字符串"),
minlength: jQuery.validator.format("请输入一个长度最少是 {0} 的字符串"),
rangelength: jQuery.validator.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),
range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
max: jQuery.validator.format("请输入一个最大为 {0} 的值"),
min: jQuery.validator.format("请输入一个最小为 {0} 的值")
});
以下是适用代码
*使用class="{}"的方式必须引 入jquery.metadata.js
每个要判断的标记都要有name属性
<form id="commentForm" method="post" >
用户名 :<input id="cname" name="name" class="{required:true,minlength:6,maxlength:12}" />
密码:<input type="password" class="{required:true,minlength:6,maxlength:13}" id="pwd" name="pwd" />
密码确认<input type="password" class="{required:true,minlength:6,maxlength:13,equalTo:'#pwd'}" id="pwd2" name="pwd2" />
Email<input type="text" class="required email" name="email" id="email" />
手机:<input type="text" id="tel" class="required" name="tel"/>
性别:男<input type="radio" name="sex" id="sex" class="" value="boy"/>
女<input type="radio" name="sex" id="sex" class="" value="gril" />
出生年月:<input type="text" class="required" name="year" id = "year" readonly="readonly" />
籍贯: <select name="contry" class="required">
<option value="">请选择</option>
<option value="cn">中国</option>
<option value="jbbw">津巴布韦</option>
<option value="cn">海地</option>
<option value="medf">马尔代夫</option>
</select>
简介<textarea id="ccomment" name="comment" class="required" cols="50"></textarea>
<input type="submit" value="Submit"/>
</form>
$().ready(function() {
$("#commentForm").validate();
});
第二种将校验规则写到代码中
$("#commentForm").validate({
rules: {
name: "required",
email: {
required: true,
email: true
},
pwd: {
required: true,
minlength: 5
},
pwd2: {
required: true,
minlength: 5,
equalTo: "#password"
}
},
messages: {
name: "请输入姓名",
email: {
required: "请输入Email地址",
email: "请输入正确的email地址"
},
pwd: {
required: "请输入密码",
minlength: jQuery.format("密码不能小于{0}个字符")
},
pwd2: {
required: "请输入确认密码",
minlength: "确认密码不能小于5个字符",
equalTo: "两次输入密码不一致"
}
}
});
});
由于默认是submit提交,以下为更改后代码来替代默认
submitHandler:function(form){
alert("submitted");
form.submit();
}
});
debug参数
如果这个参数为true,那么表单不会提交,只进行检查
debug:true
});
关于样式
样式可自定义,以下是这次的样式
span.error{ color:#F03; position: relative; top:16px;}
span.errorImg{background:url(warning.gif) no-repeat;}//提示信息前的图片
input.error,textarea.error,select.error{ background:url(invalid_line.gif) repeat-x scroll center bottom #FFFFFF;border:2px solid #DD7870; }//错误时input的样式