2010.08.18——— 我佛山人 validator v4.0 ajax验证试用
2010.08.18——— 我佛山人 validator v4.0 ajax验证试用
参考： http://bbs.blueidea.com/thread-2841125-2-1.html
关于ajax验证 chm文档里面交代的不是很清楚 我今天用了下 折腾了半天 才有点样子
1. 首先 ajax验证 属性为 action 例如：
2. 发往后台的数据
默认是是 USERNAME=当前值 会发送一个键值对 键是当前输入框的name 值为当前输入框中的值
当然 如果需要验证其他一些信息 或者给后台传递一些信息 可以使用onRemote事件
element.params.type = 'gmail';
这个就又加另一个 type=gmail的参数 一并传递给后台了
3. 后台处理页面传来的参数
这个应该不用更多说了
4. 后台返回结果
后台验证完以后 给前台传递json格式的数据类型
必须严格按照这种格式（注意双引号）
1表示成功 0表示失败 message的值可以随便取
另外，后台验证生成json之前，必须设置contentType为application/json
response.setCharacterEncoding("UTF-8");
response.setContentType("application/json")
5. 全部代码
jsp
action(struts2)
struts.xml
参考： http://bbs.blueidea.com/thread-2841125-2-1.html
关于ajax验证 chm文档里面交代的不是很清楚 我今天用了下 折腾了半天 才有点样子
1. 首先 ajax验证 属性为 action 例如：
<input id="Name" name="USERNAME" type="text" value="wfsr" rule="username" empty="不允许为空" warn="验证错误" tips="昵称是由英文与下划线组成的4~20位的字符"
pass="验证正确" action="${pageContext.request.contextPath}/ajax/filter_user.action"/>
2. 发往后台的数据
默认是是 USERNAME=当前值 会发送一个键值对 键是当前输入框的name 值为当前输入框中的值
当然 如果需要验证其他一些信息 或者给后台传递一些信息 可以使用onRemote事件
Validator.setup({
form : 'demo', //指定要验证的表单的id
configs : 'tag', //指定表单验证规则的配置方式
events : {
'Email' : { //表示给name为Email的验证项添加的事件
onRemote : function(element){ //事件传递的参数是当前验证项的Element对象(注意不是HTML Element)
element.params.type = 'gmail'; //此时params为{Email : '...', type : 'gmail'}
}
}
}
});
element.params.type = 'gmail';
这个就又加另一个 type=gmail的参数 一并传递给后台了
3. 后台处理页面传来的参数
这个应该不用更多说了
request.getParameter("USERNAME");
4. 后台返回结果
后台验证完以后 给前台传递json格式的数据类型
{"state": "1","message": "可以注册"}
{"state": "0","message": "用户名存在"}
必须严格按照这种格式（注意双引号）
1表示成功 0表示失败 message的值可以随便取
另外，后台验证生成json之前，必须设置contentType为application/json
response.setCharacterEncoding("UTF-8");
response.setContentType("application/json")
5. 全部代码
jsp
<%@ 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>
<title>测试1</title>
<link href="css/validator.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/mootools.js" ></script>
<script type="text/javascript" src="js/full-validator.js" ></script>
<script type="text/javascript">
Validator.setup({
form : 'demo',
configs : 'attribute',
warns : 'summary, follow,color,class, alert,tips',
color : {warn :'black', pass:'white'},
summary : { id : 'summary'}
})
</script>
</head>
<br />
<body><div id="summary" class="summary"></div>
<form id="demo" method="post" action="aaa.action" onsubmit="return false">
<table>
<tr>
<td>名字：</td>
<td><input id="Name" name="USERNAME" type="text" value="wfsr" rule="username" empty="不允许为空" warn="验证错误" tips="昵称是由英文与
下划线组成的4~20位的字符" pass="验证正确" action="${pageContext.request.contextPath}/ajax/filter_user.action"/></td>
</tr>
<tr>
<td>密码：</td>
<td><input id="Password" name="Password" type="password" value="abcdEfG123" rule="password" level="2" empty="密码不允许为空" warn="
密码安全度太低" tips="请输入6~16位数字、字母及特殊字符的混合字符" pass="验证正确"/></td>
</tr>
<tr>
<td colspan="2"><input name="Submit" type="submit" value="确定提交" /></td>
</tr>
</table>
</form>
</body>
</html>
action(struts2)
public String isExist() throws SQLException, IOException{
HttpServletRequest request = ServletActionContext.getRequest();
String name = request.getParameter("USERNAME");
System.out.println(name);
List<TLB_USER> list = this.TLB_USERService.getAllUser();
System.out.println(list);
String state = "1";
String msg = "可以注册";
for(int i=0;i<list.size();i++){
Map user = (Map) list.get(i);
if(user.get("USERNAME").equals(name.trim())){
state = "0";
msg = "用户名存在";
}
}
String s = "{\"state\": \""+state+"\",\"message\": \""+msg+"\"}";
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("UTF-8");
response.setContentType("application/json");
PrintWriter out = response.getWriter();
log.info(s);
out.println(s);
return NONE;
}
struts.xml
<action name="filter_user" class="com.huitu.action.domain.XiTongGuanLi_YongHuAction_page" method="isExist"> </action>