struts2+jquery_validate控件验证

最新推荐文章于 2017-10-31 10:32:46 发布

IT行者

最新推荐文章于 2017-10-31 10:32:46 发布

阅读量786

点赞数

分类专栏： web开发 struts

web开发同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

struts

10 篇文章 0 订阅

订阅专栏

struts2+jquery_validate控件验证，新增用户
描述：其中的一些css及js文件不需要引入，为了实现验证功能只需引入jquery-1.11.0.min.js、jquery.validate.js、useradd.js三个文件，
这里包括了jquery_validate控件的基本用法、自定义验证方法及验证成功后的逻辑，自认为已经够用了，希望和大家分享一下

新增页面user_add.jsp文件代码如下：jsp中的一些信息无用，主要有用的就是表单元素，请有选择性的使用，这里我就不删减了。

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>管理</title>
<link href="<%=basePath %>statics/resources/css/manage.css" rel="stylesheet" type="text/css" />
<link href="<%=basePath %>statics/js/jquerylib/impromptu/style/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%=basePath %>page/common/MD5.js"></script>
<script src="<%=basePath %>statics/js/jquerylib/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="<%=basePath %>statics/js/plugins/tab/app.tab.js" type="text/javascript"></script>
<script src="<%=basePath %>statics/js/jquerylib/jqueryui/jquery-ui-1.10.4.custom.min.js" type="text/javascript"></script>
<script src="<%=basePath %>statics/js/jquerylib/impromptu/jquery-impromptu.min.js" type="text/javascript"></script>
<script type="text/javascript" src="<%=basePath %>statics/js/plugins/validate/jquery.validate.js"></script>
<script type="text/javascript" src="<%=basePath %>statics/js/plugins/validate/useradd.js"></script>
<script type="text/javascript">

function demo1(){
var appTab = new AppTab();
appTab.init("tab1");
}

//将密码加密
function md5Code() {
var passValue=document.getElementById("password").value;

passValue=hex_md5(passValue);
document.getElementById("password").value=passValue;

}
/**
*新增成功提示
*/
function successPrompt(){
var editId = document.getElementById("userId").value;
var txt = '用户新增成功!<br /><div id="tishi" class="button_area paddingTop20"><a class="button_style1" href="add" >继续新增</a><a class="button_style2" href="${pageContext.request.contextPath}/edit?editId='+editId+'">完善该用户信息</a><a class="button_style3" href="tapUserInfoList">返回</a></div>';
$.prompt("",txt,{buttons:{},alertType:'sucess'});

}

</script>
</head>
<body>
<div class="right" id="tab1">
<div class="line_1"></div>
<div class="line_2"></div>
<div class="tab">
<div class="tab_l tab_item "><a href="${pageContext.request.contextPath}/tapUserInfoList">用户查询</a></div>
<div class="tab_r tab_item tab_hover"><a href="${pageContext.request.contextPath}/add">用户新增</a></div>
<div class="clear"></div>
</div>


<div class="tab_content ">

<form id="insertTapInfoUser" action="<%=basePath%>/insertTapInfoUser" method="post" style="clear:both;">
<input id="userId" name="userId" value="${userId}" hidden="true" style="display: none">
<table width="99%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="20%" align="right" class="add_left"><img src="<%=basePath %>statics/resources/images/add_photo.jpg" width="107" height="107" /></td>
<td width="80%"><input id="upLoadAddress" type="file" name="file" />
<input type="submit" name="Submit" value="提交" class="add_photo_btn" /></td>
</tr>
</table>
<table width="99%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="20%" align="right" class="add_left">用户名称：</td>
<td width="80%"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="60%"><input id="userName" name="userName" type="text" class="autoinput input " value="" placeholder="请输入用户名称"/></td>
<td width="40%"><div id="userNameMessage" class=""></div></td>
</tr>
</table></td>
</tr>
<tr>
<td align="right" class="add_left">用户类型：</td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="60%"><select id="userType" name="userType" class="autoselect input" >
<option value="">请选择...</option>
<c:forEach items="${userTypes}" var="userType">
<option value="${userType.codeId }">${userType.codeName }</option>
</c:forEach>
</select></td>
<td width="40%"><div id="userTypeMessage" class=""></div></td>
</tr>
</table></td>
</tr>
<tr>
<td align="right" class="add_left">用户级别：</td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="60%"><select id="userLevel" name="userLevel" class="autoselect input" >
<option value="">请选择...</option>
<c:forEach items="${userLevels}" var="userLevel">
<option value="${userLevel.codeId }">${userLevel.codeName }</option>
</c:forEach>
</select></td>
<td width="40%"><div id="userLevelMessage" class=""></div></td>
</tr>
</table></td>
</tr>
<tr>
<td align="right" class="add_left">登录密码：</td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="60%"><input id="password" name="password" type="password" class="autoinput input" value="" /></td>
<td width="40%"><div id="passwordMessage" class=""></div></td>
</tr>
</table></td>
</tr>
<tr>
<td align="right" class="add_left">密码验证：</td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="60%"><input id="passwordCheck" name="passwordCheck" type="password" class="autoinput input" value="" /></td>
<td width="40%"><div id="passwordCheckMessage" class=""></div></td>
</tr>
</table></td>
</tr>
<tr>
<td align="right" class="add_left">E-mail：</td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="60%"><input id="email" name="email" type="text" class="autoinput input" value="" placeholder="请输入常用E-mail地址，便于找回密码"/></td>
<td width="40%"><div id="emailMessage" class=""></div></td>
</tr>
</table></td>
</tr>
<tr>
<td align="right" class="add_left"> </td>
<td><div class="add_btn_div"><input class="add_submit" type="submit" value="提交"/></div><div class="add_btn_div"><input id="reset" type="button" value="重置" class="add_reset" onClick="" /></div><div class="clear"></div></td>
</tr>
</table>
</form>


</div>

</div>

</body>

useradd.js文件代码如下：

$().ready(function() {
demo1();
//新增方法校验密码强度
jQuery.validator.addMethod("password", function(value, element) {
return this.optional(element) || /^[a-zA-Z0-9]{6,14}$/.test(value) ; }, "用户名应包含6-14个数字、字母");

var v = $("#insertTapInfoUser").validate({
//验证通过后执行的逻辑
submitHandler:function(form){
var userType = $("#userType").val();
if(userType =="0") {
userType = "超级管理员";
}
if(userType =="1") {
userType = "个人注册用户";
}
if(userType =="2") {
userType = "企业用户";
}
if(userType =="3") {
userType = "虚拟企业用户";
}
if(userType =="4") {
userType = "测试用户";
}
if(userType =="5") {
userType = "非注册用户";
}
var txt = '<br/></br></br>用户名称：'+$("#userName").val()+'<br/></br></br>密码安全：<img src="statics/resources/images/password_pro.png" width="195" height="14" /></br></br><br/>用户类型：'+userType+'</br></br><br/>登录邮箱：'+$("#email").val()+'</br></br></br></br></br></br>';
var title = '<div class="kindly_tip"></div>';
$.prompt(title,txt,{
buttons:{是:true,否:false},
submit:function(v,m,f){
if(v){
$.ImpromptuClose();
md5Code();
$.ajax({
type: "POST",
url:"${pageContext.request.contextPath}/insertTapInfoUser",
data:$('#insertTapInfoUser').serialize(),// 你的formid
async: false,
error: function(request) {
alert("Connection error");
},
success: function(data) {
document.getElementById("userId").value= data;
successPrompt();

}
});

} else {
$.ImpromptuClose();
}
}
});
},
//每个表单元素验证通过后，在后面的div标签中添加class属性
success:function(div){
div.addClass("add_tip_ok");
},
//设置错误信息显示的位置
errorPlacement: function(error, element) {
error.appendTo(element.parent().next());
},
//表单元素验证规则
rules: {
userName: {
required:true,
remote:{
url: "isUserNameUnique.action",
type: "post",
dataType: 'json',
data: {
'userName': function(){
return $('#userName').val();
}
}
}
},

userType: "required",
userLevel: "required",
email: {
required: true,
email: true
},
password: {
required: true,
password:true
},
passwordCheck: {
required: true,
password:true,
equalTo: "#password"
}
},
//验证失败后显示的信息
messages: {
userName:{
required:"<font color=red>请输入用户名称</font>",
remote:"<font color=red>用户名已经存在</font>"
},
userType: "<font color=red>请选择用户类型</font>",
userLevel: "<font color=red>请选择用户级别</font>",
email: {
required: "<font color=red>请输入E-mail地址</font>",
email: "<font color=red>请输入常用E-mail地址，便于找回密码</font>"
},
password: {
required: "<font color=red>请输入密码</font>",
password:"<font color=red>密码为6~14位数字或字母组合</font>"
},
passwordCheck: {
required: "<font color=red>请输入确认密码</font>",
password:"<font color=red>确认密码为6~14位数字或字母组合</font>",
equalTo: "<font color=red>两次输入密码不一致</font>"
}
}

});
//清空输入框内容
$("#reset").click(function() {
v.resetForm();
$('.input').val("");
$("#userName").focus();
});

});

后台验证用户是否已经注册，代码如下：

/**
* 验证用户名是否唯一
* @return
* @throws Exception
*/
public void isUserNameUnique() throws Exception {

String flag = "true";
TapInfoUser tapInfoUserCheck = new TapInfoUser();
System.out.println("userName:" + request.getParameter("userName"));
tapInfoUserCheck.setUserName(request.getParameter("userName"));
tapInfoUser = tapInfoUserService.searchTapInofUserSelective(tapInfoUserCheck);
if (tapInfoUser != null) {

flag = "false"; //用户名已存在
}
response.getWriter().print(flag);
}

IT行者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
struts2+jquery_validate控件验证

struts2+jquery_validate控件验证，新增用户描述：其中的一些css及js文件不需要引入，为了实现验证功能只需引入jquery-1.11.0.min.js、jquery.validate.js、useradd.js三个文件，这里包括了jquery_validate控件的基本用法、自定义验证方法及验证成功后的逻辑，自认为已经够用了，希望和大家分享一下新增页
复制链接

扫一扫

专栏目录