步骤：

(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>
<  charset=\"UTF-8\">
< >Insert   here</ >
<  src=\"js/jquery-1.11.3.min.js\" type=\"text/ \"></ >
<  src=\"js/jquery.validate.min.js\" type=\"text/ \"></ >
< >
    //自定义规则
	$.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\":\"没有别的选择\"
				}
			}
		});
	});
</ >
<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);

 

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月18日 星期一

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章