jquery控制的表单验证和提交

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>修改密码</title>
<link href="${pageContext.request.contextPath}/css/global.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/css/password.css" rel="stylesheet" type="text/css" />
<script src="${pageContext.request.contextPath}/js/jquery-1.7.2.min.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.validate.js"></script>
<script src="http://gtvideo.chaoxing.com/tools/jquery-validation-1.15.0/dist/jquery.form.js"></script>
<script src="http://gtvideo.chaoxing.com/tools/layer/layer-v2.1/layer/layer.js"></script>
<script>

 $().ready(function() {
	 $.validator.setDefaults({
			submitHandler: function(form) {
					try{
						$(form).ajaxSubmit({success:function(data){
								//layer.alert(data);
								if(data=="操作失败"){
									layer.alert(data);
								}else{
									layer.open({
										type : 1,
										title : null,
										closeBtn  : 0,
										shadeClose  : true,
										time : 3000,
										content : $('.wordtext'),
										end: function () {
							                location.reload();
							            }
									});
								}
							
							}
						});
					}catch(e){}
				}});
// 在键盘按下并释放及提交后验证提交表单
  $("#form1").validate({
	    rules: {
	      user_name: {
	        required: true,
	        minlength:5,
	        maxlength: 20
	      },
	      pastWord: {
		        required: true,
		        minlength:5,
		        maxlength: 20
		      },
	      passWord: {
	        required: true,
	        minlength:5,
	        maxlength: 20
	      },
	      confirm_password: {
	        required: true,
	        minlength:5,
	        maxlength: 20,
	        equalTo: "#passWord"
	      },
	    },
	    messages: {
	      user_name: {
	        required: "请输入用户名",
	        maxlength: "最大长度为20"
	        
	      },
	      pastWord: {
		        required: "请输入原始密码",
		        maxlength: "最大长度为20"
		      },
	      passWord: {
	        required: "请输入密码",
	        maxlength: "最大长度为20"
	      },
	      confirm_password: {
	        required: "请输入密码",
	        maxlength: "最大长度为20",
	        equalTo: "两次密码输入不一致"
	      },
	    }
	});

});
</script>

<style>
.error{
	color:red;
}
</style>
</head>
<body>
<div class="pcpasstext">
    <div class="password" style="padding:30px 0 0 40px; min-height:515px;">
        <div class="text" style="padding:20px 0;">温馨提示:此处不支持读者修改密码,只支持培训学员修改</div>
        <form id="form1" name="form1" method="post" action="${pageContext.request.contextPath }/updatePwd">
        <ul>
            <li>
                <div class="label">用户名:</div>
                <input type="text" id="user_name"name="user_name" class="fidtext" />
            </li>
            <li>
                <div class="label">原密码:</div>
                <input type="password" id="pastWord" name="pastWord" class="fidtext" />
              <!--   <span class="leftF">* 密码输入错误</span> -->
            </li>
            <li>
                <div class="label">新密码:</div>
                <input type="password" id="passWord" name="passWord" class="fidtext"/>
            </li>
            <li>
                <div class="label">确认新密码:</div>
                <input type="password" id="confirm_password" name="confirm_password" class="fidtext" />
               <!--  <span class="leftF">* 两次密码输入不一致</span> -->
            </li>
            <li>
                <div class="label"></div>
                <input type="submit" name="button" id="button" value="提交" class="bnt" style="background:#e55163;" />
            </li>
        </ul>
        </form>
    </div>
</div>
<div class="wordtext" style="display:none;">
	<img src="images/wencheng.png" width="25" height="25" />密码修改成功
</div>

</body>
</html>

 后台servlet中:

protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {


    resp.setHeader("Content-Type", "text/html; charset=UTF-8"); 
   PrintWriter out = resp.getWriter();  
   out.print(“hahahhhh”);  




}        
原文地址:https://www.cnblogs.com/jing58/p/6077722.html