表单验证插件 validate （基本表单验证，自定义验证规则）

步骤：

(1) 将jquery的原始文件和插件文件jquery.validate.js导入到工程中

(2) 编写js代码对表单进行验证

表单验证格式：

$("#form表单").validate(json数据格式);

json数据格式：

{
rules:{
表单项name值:校验规则，
表单项name值:校验规则... ...
},
messages:{
表单项name值:错误提示信息，
表单项name值:错误提示信息... ...
}
}

常用校验规则：

错误信息显示格式：

扫描二维码关注公众号，回复： 4859768 查看本文章

可以指定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);

表单验证插件 validate （基本表单验证，自定义验证规则）

猜你喜欢