1、导入js文件
<script src="jQuery.2.1.1.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script src="messages_zh.js" type="text/javascript"></script>2、默认校检规则
| 校检 | 说明 |
|---|---|
| required:true | 必输字段 |
| remote:”remote-valid.jsp” | 使用ajax方法调用remote-valid.jsp验证输入值 |
| email:true | 必须输入正确格式的电子邮件 |
| url:true | 必须输入正确格式的网址 |
| date:true | 必须输入正确格式的日期，日期校验ie6出错，慎用 |
| dateISO:true | 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性 |
| number:true | 必须输入合法的数字(负数，小数) |
| digits:true | 必须输入整数 |
| creditcard:true | 必须输入合法的信用卡号 |
| equalTo:”#password” | 输入值必须和#password相同 |
| accept: | 输入拥有合法后缀名的字符串（上传文件的后缀） |
| maxlength:5 | 输入长度最多是5的字符串(汉字算一个字符) |
| minlength:10 | 输入长度最小是10的字符串(汉字算一个字符) |
| rangelength:[5,10] | 输入长度必须介于 5 和 10 之间的字符串”)(汉字算一个字符) |
| range:[5,10] | 输入值必须介于 5 和 10 之间 |
| max:5 | 输入值不能大于5 |
| min:10 | 输入值不能小于10 |
3、使用方式
1、通过属性方式添加
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>在控件中设置验证规则</title>
<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/messages_zh.js"></script>
<script> $(document).ready(() { $(#inputForm).validate(); }); </script>
</head>
<body>
<form id="inputForm" method="post" action="">
<fieldset>
<p>
<label for="cname">Name (必需, 最小两个字母)</label>
<input id="cname" name="name" minlength="2" type="text" required>
</p>
<p>
<label for="cemail">E-Mail (必需)</label>
<input id="cemail" type="email" name="email" required>
</p>
<p>
<input class="submit" type="submit" value="Submit">
</p>
</fieldset>
</form>
</body>
</html>2、metadata用法，将校验规则写到控件中
首先引用jquery.metadata.js
<!DOCTYPE HTML>
<head>
<base href="<%=basePath%>">
<title>jQuery Validate验证框架详解-metadata用法</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/messages_zh.js"></script>
<script type="text/javascript" src="js/jquery.metadata.min.js"></script>
<script> $(document).ready(() { $(#inputForm).validate(); }); </script>
</head>
<body>
<form id="inputForm" method="post" action="">
<p>
<label for="myname">用户名：</label>
<!-- id和name最好同时写上 -->
<input id="myname" name="myname" class="required" />
</p>
<p>
<label for="email">E-Mail：</label>
<input id="email" name="email" class="required email" />
</p>
<p>
<label for="password">登陆密码：</label>
<input id="password" name="password" type="password" class="{required:true,minlength:5}" />
</p>
<p>
<label for="confirm_password">确认密码：</label>
<input id="confirm_password" name="confirm_password" type="password" class="{required:true,minlength:5,equalTo:'#password'}" />
</p>
<p>
<label for="confirm_password">性别：</label>
<!-- 表示必须选中一个 -->
<input type="radio" id="gender_male" value="m" name="gender" class="{required:true}" />
<input type="radio" id="gender_female" value="f" name="gender"/>
</p>
<p>
<label for="confirm_password">爱好：</label>
<!-- checkbox的minlength表示必须选中的最小个数,maxlength表示最大的选中个数,rangelength:[2,3]表示选中个数区间 -->
<input type="checkbox" id="spam_email" value="email" name="spam[]" class="{required:true, minlength:2}" />
<input type="checkbox" id="spam_phone" value="phone" name="spam[]" />
<input type="checkbox" id="spam_mail" value="mail" name="spam[]" />
</p>
<p>
<label for="confirm_password">城市：</label>
<select id="jungle" name="jungle" title="Please select something!" class="{required:true}">
<option value=""></option>
<option value="1">厦门</option>
<option value="2">泉州</option>
<option value="3">Oi</option>
</select>
</p>
<p>
<input class="submit" type="submit" value="立即注册" />
</p>
</form>
</body>
</html>3、使用Jquery.Validate进行验证方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>在控件中设置验证规则</title>
<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/messages_zh.js"></script>
<script> $(document).ready(function () { $("#pageForm").validate({ rules: { name : { remote : "${ctx}/sys/user/checkLoginName?oldLoginName=" + encodeURIComponent('${user.loginName}') }, DictContent: { required: true, maxlength: 10 } }, messages: { name : { remote : "用户账号已存在" }, DictContent: { required: "不能为空", maxlength: jQuery.format("不能超过{0}个字符") } }, submitHandler: function (form) { loading('正在提交，请稍等...'); form.submit(); } }) }) </script>
</head>
<body>
<form id="inputForm" method="post" action="">
<fieldset>
<p>
<label for="name">Name</label>
<input id="name" name="name" type="text" class="form-control required">
</p>
<p>
<label for="DictContent">DictContent</label>
<input id="DictContent" name="DictContent" type="text" class="form-control ">
</p>
<p>
<input class="submit" type="submit" value="Submit">
</p>
</fieldset>
</form>
</body>
</html>4、添加自定义效验
js：
$(document).ready(
function() {
$.validator.addMethod("newPassword",
function(value, element) {
return this.optional(element)
|| (/^[A-Za-z0-9]{8,}$/
.test(value) && /[A-Za-z].*[0-9]|[0-9].*[A-Za-z]/
.test(value));
}, "密码由数字和字母组成，不少于8位！");
});
html:
<input id="newPassword"
name="newPassword" type="password" value="" maxlength="50"
minlength="3"
class="form-control newPassword ${empty user.id?'required':''}" />