注册输入用户名动态校验是否存在（使用了异步校验）

演示

1.为输入框自定义校验规则（页面1）

<script type="text/javascript">
	/*
		自定义校验规则，用于判断用户名是否存在(放到外联文件中没作用，原因不明？)
	*/
	$.validator.addMethod(
		//规则的名称
		"check_login_userName",
		//校验的函数
		function(value,element,params){
			
			//定义一个标志
			var flag = false;
			
			//value:输入的内容
			//element:被校验的元素对象
			//params：规则对应的参数值
			//目的：对输入的username进行ajax校验
			$.ajax({
				"async":false,//是否异步（false为不异步）（如果异步的话，这里运行不到就会有返回值出去）
				"url":"${pageContext.request.contextPath}/checkUserName",//需要访问的地址
				"data":{"username":value},//发送的数据（发送给服务器）（这个值是我们所写的用户名）
				"type":"POST",//提交方式
				"dataType":"json",//指定返回的数据类型
				"success":function(data){//成功会运行这个函数
					flag = data.isExist;
				}
			});
			//返回false代表该校验器不通过
			return !flag;
		}
		
	);
	
</script>

2.获取表单输入的数据-checkUserName.java（页面2）

	//校验用户名是否存在
	public boolean checkUsername(String username) {
		UserDao dao = new UserDao();
		Long isExist = 0L;
		try {
			isExist = dao.checkUsername(username);
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return isExist>0?true:false;
	}

3.ajax将用户名提交到服务器去校验（service层）

	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//获得用户名
		String username = request.getParameter("username");//这个“usernanme”是我们输入的用户名
		
		UserService service = new UserService();
		boolean isExist = service.checkUsername(username);
		
		String json = "{\"isExist\":"+isExist+"}";//把他变成JSON类型的值并返回
		
		response.getWriter().write(json);
	}

3.1（dao层）

	//校验用户名是否存在
	public Long checkUsername(String username) throws SQLException {
		QueryRunner runner = new QueryRunner(DataSourceUtils.getDataSource());
		String sql = "select count(*) from login where login_userName=?";
		Long query = (Long) runner.query(sql, new ScalarHandler(), username);
		return query;
	}

4.根据返回的结果，动态提示用户名是否可用

$(function(){
	$("#CheckForm").validate({
		rules:{
			"login_userName":{
				"required":true,
				"minlength":3,
				"maxlength":12,
				"check_login_userName":true,
			},
		},
	messages:{

		"login_userName":{
			"required":"用户名不能为空!",
			"minlength":"用户名不得少于3位!",
			"maxlength":"用户名不得多于5位!",
			"check_login_userName":"用户名已存在",
		},
	  },
	});
});

5.插件的使用：

	<script src="${pageContext.request.contextPath }/js/login/login_CustomCheck.js" type="text/javascript"></script><!-- 自定义的验证（validate） -->
	<script src="${pageContext.request.contextPath }/js/login/jquery.validate.min.js" type="text/javascript" ></script><!--引入validate插件js文件-->