1.引入必要的文件,以及语言中文提示包
2.使用规则如下:
| 序号 | 规则 | 描述 |
|---|---|---|
| 1 | required:true | 必须输入的字段。 |
| 2 | remote:"check.php" | 使用 ajax 方法调用 check.php 验证输入值。 |
| 3 | email:true | 必须输入正确格式的电子邮件。 |
| 4 | url:true | 必须输入正确格式的网址。 |
| 5 | date:true | 必须输入正确格式的日期。日期校验 ie6 出错，慎用。 |
| 6 | dateISO:true | 必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。 |
| 7 | number:true | 必须输入合法的数字（负数，小数）。 |
| 8 | digits:true | 必须输入整数。 |
| 9 | creditcard: | 必须输入合法的信用卡号。 |
| 10 | equalTo:"#field" | 输入值必须和 #field 相同。 |
| 11 | accept: | 输入拥有合法后缀名的字符串（上传文件的后缀）。 |
| 12 | maxlength:5 | 输入长度最多是 5 的字符串（汉字算一个字符）。 |
| 13 | minlength:10 | 输入长度最小是 10 的字符串（汉字算一个字符）。 |
| 14 | rangelength:[5,10] | 输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。 |
| 15 | range:[5,10] | 输入值必须介于 5 和 10 之间。 |
| 16 | max:5 | 输入值不能大于 5。 |
| 17 | min:10 | 输入值不能小于 10 |
3.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title> </head>
<style>
em.error {
background: red;
/*自定义错误提示图
background: url('../image/error.png') no-repeat left center;
*/
}
em.success {
background: green;
}
</style>
<script src="/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<!-- 中文错误提示信息 -->
<script src="/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<body> <form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>一个简单的validate验证带验证提示的评论例子</legend>
<p>
<label for="cusername">姓名</label>
<em>*</em><input id="cusername" name="username" size="25" />
</p>
<p>
<label for="cemail">电子邮件</label>
<em>*</em><input id="cemail" name="email" size="25" />
</p>
<p>
<label for="curl">网址</label>
<em> </em><input id="curl" name="url" size="25" />
</p>
<p>
<label for="comment">你的评论</label>
<em>*</em><textarea id="comment" name="comment" cols="22" ></textarea>
</p>
<p>
<label for="cvalcode">验证码</label>
<input id="valcode" name="valcode" />7+9=?
</p>
<p>
<input class="submit" type="submit" value="提交"/>
</p> <script>
/*自定义一个验证方法*/
/*
formula是需要验证方法的名字 好比如required 必须的。
value返回的当前input的value值
param返回的是当前自定义的验证格式 好比如：7+9
在试用了eval方法 让字符串相加
*/
$.validator.addMethod("formula",function(value,element,param){
return value==eval(param)
},"请正确输入验证信息"); $("#commentForm").validate({
rules:{
username:{
required:true,
minlength:2
},
email:{
required:true,
email:true
},
url:"url",
comment:"required",
valcode: {
formula: "7+9"
}
},
/* 自定义错误消息*/
messages:{
username:{
required:"报告,必须输入点东西",
minlength:"长度不够"
}
},
/*自定义错误提示样式*/
errorElement:"em",
success:function(label){
label.text("成功 ").addClass('success')
}
});
</script> </form>
</body>
</html>
4.使用 ajax 方式进行验证，默认会提交当前验证的值到远程地址，如果需要提交其他的值，可以使用 data 选项。
remote: {
url: "check-email.php", //后台处理程序
type: "post", //数据发送方式
dataType: "json", //接受数据格式
data: { //要传递的数据
username: function() {
return $("#username").val();
}
}
}
注意:远程地址只能输出 "true" 或 "false"，不能有其他输出。