步骤:
(1) 将jquery的原始文件和插件文件jquery.validate.js导入到工程中
(2) 编写js代码对表单进行验证
表单验证格式:
$("#form表单").validate(json数据格式);
json数据格式:
{
rules:{
表单项name值:校验规则,
表单项name值:校验规则... ...
},
messages:{
表单项name值:错误提示信息,
表单项name值:错误提示信息... ...
}
}
常用校验规则:
错误信息显示格式:
<lable for="html元素name值" class="error" >错误信息</lable>
可以指定error设置错误信息的颜色,例如设置为红色:
.error{
color:red;
}
自定义校验规则步骤:
(1) 使用$.validator.addMethod("校验规则名称",function(value,element,params)){}
(2) 在rules中通过校验规则名称使用校验规则,在messages中定义该规则对应的错误提示信息
value是input输入的value值
element是校验组件(如:input)的节点对象
params是校验规则的参数如:
"required":true,
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="js/jquery.validate.min.js" type="text/javascript"></script>
<script>
//自定义规则
$.validator.addMethod(
//设置名字
"checkUsername",
function(value,element,params){
var flag = false;
$.ajax({
"async":false,
"url":"${pageContext.request.contextPath}/checkUsername",
"data":{"username":value},
"type":"POST",
"dataType":"json",
"success":function(data){
flag = data.isExist;
}
});
//当返回false时,出现错误信息
return !flag;
}
);
$(function(){
$("#myform").validate({
rules:{
"username":{
"required":true,
"checkUsername":true
},
"password":{
"required":true,
"rangelength":[6,12]
},
"repassword":{
"required":true,
"rangelength":[6,12],
"equalTo":"#password"
},
"email":{
"required":true,
"email":true
},
"sex":{
"required":true
}
},
messages:{
"username":{
"required":"用户名不能为空",
"checkUsername":"用户名已存在"
},
"password":{
"required":"密码不能为空",
"rangelength":"密码长度6-12位"
},
"repassword":{
"required":"密码不能为空",
"rangelength":"密码长度6-12位",
"equalTo":"两次密码不一致"
},
"email":{
"required":"邮箱不能为空",
"email":"邮箱格式不正确"
},
"sex":{
"required":"没有别的选择"
}
}
});
});
</script>
<style type="text/css">
.error{
color:red;
}
</style>
</head>
<body>
<form id="myform" action="" method="post">
username:<input type="text" name="username" ><br/>
password:<input type="text" name="password" ><br/>
repassword:<input type="text" name="repassword" ><br/>
<input type="text" name="email" ><br/>
sex:<br/>
<input type="radio" name="sex" >boy<br/>
<input type="radio" name="sex" >girl<br/>
<label class="error" for="sex" style="display:none;">没有别的选择</label><br/>
<input type="submit" value="submit">
</form>
</body>
</html>
后台:
String username = request.getParameter("username");
//数据库查询,如果用户已经存在返回true,否则返回false
UserService userServlet = new UserService();
boolean isExist = userServlet.checkUsername(username);
//需要json格式数据,不能用单引号,必须是\"转译
String json = "{\"isExist\":"+isExist+"}";
response.getWriter().write(json);