ext 实现 异步验证

             异步验证分为三个环节:

1:触发ajax;

2:ajax提交请求;

3:服务器响应请求;

基本思路和原理还是和使用原始的js相同;

代码实现及解释:

1:触发  

validationEvent:'change',//validationEvent:引发表单项进行校验操作的事件
vtype:'username',//在vtype里面添加的一个校验方法
//action=checkUserName用于在配置参数查找方法;oldname用于判断是否需要查找数据库;在修改用户时对
//不需要修改得部分屏蔽
 reqUrl: '${ctx}/user.do?action=checkUserName&oldname=${user.username}'//自定义的一个变量reqUrl用于传递给
ajax作为请求的url
               2:ajax 提交请求

在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;
	}




你可能感兴趣的:(ext 实现 异步验证)