JQuery表单验证
以前用惯了JavaScript的验证，现在又学会了JQuery的验证
验证的规则：
$("#form1").validate({
errorLabelContainer: $("#form1 div.error"),
rules: {
confirm: {
required: true,
equalTo: "#newPassword"
},
newPassword:{
required:true
},
oldPassword:{
required:true
}
},
messages: {
confirm: {
required: "请填写确认密码",
equalTo: "两次输入密码不一致"
},
newPassword:{
required:"请填写新密码",
},
oldPassword:{
required:"请填写原始密码"
}
}
});
在页面中加入laber.error
<style>
label.error {
display: block;
margin-left: 1em;
width: auto;
color: red;
}
</style>
在jsp中的body中加入
<div class="error">
</div>
全部代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<c:set var="user" value="${sessionScope.CURRENT_USER}"/>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" href="${ctx}/plugins/mobileweb/web/resources/css/bootstrap.min.css" rel="stylesheet" />
<link type="text/css" href="${ctx}/plugins/mobileweb/web/resources/css/oaCss.css" rel="stylesheet" />
<link type="text/css" href="${ctx}/plugins/mobileweb/web/resources/css/styles.css" rel="stylesheet">
<title></title>
</head>
<body>
<style>
label.error {
display: block;
margin-left: 1em;
width: auto;
color: red;
}
</style>
<div id="iframeDiv" class=" col-xs-12 col-sm-12 col-md-12 oa_todoContain">
<div class="oa_todo oaList_container" style="width:100%">
<h3 class="oa_todoTitle">修改密码：
</h3>
<form class="container-fluid " id="form1" style="padding:0; margin-top:25px;" id="form1">
<div class="oa_sendMess_addon text-center">
<span class="oa_sendMess_label"><font color=red>*</font>原密码：</span>
<input id="oldPassword" name="oldPassword" class="oa_sendMess_input" placeholder="原密码" type="password" /><br>
</div>
<div class="oa_sendMess_addon text-center">
<span class="oa_sendMess_label"><font color=red>*</font>新密码：</span>
<input id="newPassword" name="newPassword" class="oa_sendMess_input" placeholder="新密码" type="password"/><br>
</div>
<div class="oa_sendMess_addon text-center">
<span class="oa_sendMess_label"><font color=red>*</font>确认新密码：</span>
<input id="confirm" name="confirm" class="oa_sendMess_input" placeholder="确认新密码" type="password"/><br>
</div>
<div class="error">
</div>
<div class="oaList_page">
<input type="button" id="baocun" value="保存" class="oaList_pageLink">
<input type="reset" value="重置" class="oaList_pageLink">
</div>
</form>
</div>
</div>
</body>
<script type="text/javascript" src="${ctx }/resources/jquery/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="${ctx}/plugins/mobileweb/web/resources/js/jquery/bootstrap.min.js"></script>
<script type="text/javascript" src="${ctx}/plugins/mobileweb/web/resources/js/jquery/jquery.validate.min.js"></script>
<script type="text/javascript" src="${ctx}/resources/extjs/ux/ExtMD5.js"></script>
<script type="text/javascript">
$(function(){
$("#baocun").click(function(){
var flag = $("#form1").valid();
if(flag){
$.ajax({
type:"POST",
url:"${ctx}/user/changepwd",
data:{comparePassword:(MD5.hex_md5($("#confirm").val())),newPassword:(MD5.hex_md5($("#newPassword").val())),oldPassword:(MD5.hex_md5($("#oldPassword").val())),passwordTxt:($("#newPassword").val()),userId:"${user.userId}"},
dataType:"json",
success:function(msg){
if(msg.success){
alert(msg.msg);
parent.loadUrl("${ctx}/logout");
}
else alert(msg.msg);
}
});
}
});
$("#form1").validate({
errorLabelContainer: $("#form1 div.error"),
rules: {
confirm: {
required: true,
equalTo: "#newPassword"
},
newPassword:{
required:true
},
oldPassword:{
required:true
}
},
messages: {
confirm: {
required: "请填写确认密码",
equalTo: "两次输入密码不一致"
},
newPassword:{
required:"请填写新密码",
},
oldPassword:{
required:"请填写原始密码"
}
}
});
});
</script>
</html>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
