利用jquery.validate异步验证用户名是否存在(亲自验证)

0 635

利用jquery.validate异步验证值是否存在步骤

  1. 引入相关JS

<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>

2.

$.validator.setDefaults({
		    submitHandler: function() {
		      //提交表单操作
		    }
		});
		$().ready(function() {
		    $("#commentForm").validate({
		    	rules: {
		    		collegeNo: {
		    		    required: true,
		    		    remote: {
				          type: "post",
				          url: "${ctx}/test-college!AJAXCheckCollegeNo.action",
						  async:false,
				          data: {
				            username: function() {
				              return $("#collegeNo").val();
				            }
				          }
				        }
		    		},
		    	},
		    	messages: {
			   collegeNo: {
			   required:"请输入学院编号",
			   remote:"学院编号已经存在"
			   }
			}
		    })
		});

3.html代码


<input type="text" id="collegeNo" name="collegeNo" />


后台代码:

/**
	 * 验证学院编号是否存在
	 */
	public void AJAXCheckCollegeNo(){
		HttpServletRequest request = ServletActionContext.getRequest();
		HttpServletResponse response = ServletActionContext.getResponse();
		try {
			String parameter = request.getParameter("collegeNo");
			System.out.println(parameter);
			List<TestCollege> byColums = testCollegeService.getByColums("collegeNo", parameter);
			if (byColums!=null && byColums.size()>0) {
				response.getWriter().write("false");
			}else{
				response.getWriter().write("true");
			}
		} catch (Exception e) {
			e.printStackTrace();
			try {
				response.getWriter().write(0);
			} catch (IOException e1) {
				e1.printStackTrace();
			}
		}
	}


注意事项:

    ajax后台验证输出只能输出 “true” 或者 “false”

评论