ExtJs:Ajax表单验证的错误提示

[size=medium]

    当用户在前台填写完一个文本表单域后, 程序将用户填写的值传回服务器进行合法性验证, 然后在浏览器上提示填写的值是否可用.这种业务需求非常常见, 比如用户注册时检查用户名是否已被占用。那么如何用ExtJs完成这个小功能呢？
    假如有这样一个表单域，当用户填写完甚至填写时就要对填写的值进行唯一性验证。
    相关代码如下：

{
    fieldLabel: '用户名',
    name: 'username',
    xtype:'textfield',
    validationOnBlur : true, //失去焦点时进行验证
    validationOnChange : true, //发生改变时进行验证
    validator:function(){//配置验证方法, 通过这个方法和服务器进行交互
        var cmpUsername=formPanel.form.findField('username');//formPanel是放置这个组件的面板, 此处没有写出
        var value=cmpUsername.getValue();
        if(value.length!=0){//当值不为空时才进行唯一性验证
            Ext.Ajax.request({
                params:{'username':value},
                method:"POST",
                url:'check.do'
                success:function(response,options){
                    if(response.responseText=='false'){//服务器端的返回值为'false'
                        cmpUsername.markInvalid("该用户名已经被占用!");//这个方法可以给表单组件加上红圈圈和悬浮提示
                    }
                }
            });
        }
    }
 }

    validator函数的返回值是这样定义的:合法时返回布尔值true,不合法时返回错误信息字符串. 所以有人会这样写validator函数:

 function(){
     var flag = false;
     Ext.Ajax.request({
          url: '...',
          params:{'username':value},
          method: 'POST',
          success: function (response, options) {
              if(response.responseText == "false"){
                  flag = "该用户名已经被占用";//不合法时
                  //alert('ajax');//测试用的alert2
              }
              else{
                  flag =  true;//合法时
              }
              
          }
      });
     //alert('validator');//测试用的alert1
     return flag;
 }

    从逻辑上来说,这样做没错, 但实际上并不能取得想要的效果, 原因是Ajax函数的异步性质.如果将代码中的两个alert去掉然后再执行程序, 会发现alert1会在alert2之前执行,也就是说request的success函数会在validator函数执行完之后才执行,那么它里面对flag的赋值代码当然也就无效了.
[/size]

评论

3 楼 bfttt999 2013-04-17  

async 这个参数是xhr的，并非ExtJS的内定参数，所以理论上无论哪个版本都无所谓。
就算是用JQuery也应该能起作用。

2 楼 KeepCrazy 2013-04-16  

bfttt999 写道

ajax这个问题一开始也困扰了我好久,不过现在可以用同步调用来实现这个目的了。
async:false
示例类似于这样：
var reqOptions={
    url:methodUrl,
    async:false,
params:postData,
method:'POST',
callback:function(options,success,resp){
//do something
}
    };
    opts = opts||{};
    Ext.apply(reqOptions,opts);
Ext.Ajax.request(reqOptions);

我用的是ExtJs3.2, 不支持这个配置...听说4可以

1 楼 bfttt999 2013-04-11  

ajax这个问题一开始也困扰了我好久,不过现在可以用同步调用来实现这个目的了。
async:false
示例类似于这样：
var reqOptions={
    url:methodUrl,
    async:false,
params:postData,
method:'POST',
callback:function(options,success,resp){
//do something
}
    };
    opts = opts||{};
    Ext.apply(reqOptions,opts);
Ext.Ajax.request(reqOptions);