异步验证分为三个环节:
1:触发ajax;
2:ajax提交请求;
3:服务器响应请求;
基本思路和原理还是和使用原始的js相同;
代码实现及解释:
1:触发
2:ajax 提交请求validationEvent:'change',//validationEvent:引发表单项进行校验操作的事件 vtype:'username',//在vtype里面添加的一个校验方法 //action=checkUserName用于在配置参数查找方法;oldname用于判断是否需要查找数据库;在修改用户时对 //不需要修改得部分屏蔽 reqUrl: '${ctx}/user.do?action=checkUserName&oldname=${user.username}'//自定义的一个变量reqUrl用于传递给 ajax作为请求的url
在vtype.js文件中增加username函数;
new Date().getTime()username : function(val, field) {
var xmlHttp;
//new 一个xmlhttprequest 对象;根据浏览器的不同分为ie(类似组件的格式)和非ie
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
//获得提交的url地址(在上段代码中)
var url = field.reqUrl;
//确认提交的方式为post,地址url,和是否需要异步,这边用同步方式为了防止因为网络的问题
//导致信息未能及时返回给用户界面
xmlHttp.open("POST", url, false);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
//增加冗余部分(new Date.getTime()的用处是防止js直接访问缓存而导致的数据不能及时更新
因为当请求地址相同时js会认为是同一个请求而不再请求服务器)
var params = "username=" + val + "&sid=" + new Date().getTime();
xmlHttp.send(params);
//将返回的字符串转换成js识别的json信息
var responseArray = Ext.util.JSON.decode(xmlHttp.responseText);
if(responseArray.success){ //用户名可以注册
return true;
} else {//用户名已经被注册
return false;
}
},
usernameText : '该用户名已经被注册'
3.服务器响应请求
public void checkUserName(HttpServletRequest request, HttpServletResponse response) {
String username = request.getParameter("username");
//上文以提及oldname的用处
String oldname = request.getParameter("oldname");
if (userService.isUsernameUnique(username, oldname))
writeJson(response, "{success:true}");
else
writeJson(response, "{success:false}");
}
isusernameUnique 实现业务逻辑即判断和查询数据库;排除三种无需查询数据库的情况(减轻服务器查找数据库的负担)
1.输入框为空
2.再次给输入框焦点却未修改的情况
3.为编辑的时候(或者修改用户信息时)框内值肯定是存在的,所以无需再查询数据库
public boolean isUsernameUnique(String newValue, String oleValue) {
if (newValue == null || newValue.equals(oleValue))
return true;
List<Userinfo> list = userDao.findByProperty("username", newValue);
return list.size() > 0 ? false : true;
}