Extjs表单输入框异步校验的插件实现方法

下面是详细讲解“Extjs表单输入框异步校验的插件实现方法”的完整攻略。

什么是Extjs表单输入框异步校验的插件？

在使用Extjs框架编写表单时，常常需要对表单中的输入框进行校验，以保证用户输入的内容符合要求。而有些校验规则需要通过异步方式进行，比如从后台获取数据判断输入是否合法。这时就需要用到Extjs表单输入框异步校验的插件。

实现方法

具体实现方法如下：

1. 引入必要的js文件。在使用Extjs框架时，需要引入以下几个js文件：

<script type="text/javascript" src="/extjs/ext-all.js"></script>
<script type="text/javascript" src="/extjs/plugins/FormValidation.js"></script>
<script type="text/javascript" src="/extjs/plugins/AsyncFormValidation.js"></script>

其中，FormValidation.js用来进行表单校验，AsyncFormValidation.js则是进行异步校验时用到的插件。

1. 在表单中添加要进行异步校验的输入框。比如下面是一个用户名输入框：

{
    xtype: 'textfield',
    fieldLabel: '用户名',
    name: 'username',
    id: 'username',
    allowBlank: false,
    vtype: 'alphanum',
    maxLength: 20,
    validator: function(value){
        if(value.length >= 6 && value.length <=10){
            return true;
        }else{
            return "用户名长度必须在6~10个字符之间！";
        }
    }
}

1. 在表单中添加异步校验规则。我们可以使用AsyncFormValidation插件提供的async属性来设置异步校验规则。比如下面是一个调用后台校验用户名是否唯一的规则：

{
    xtype: 'textfield',
    fieldLabel: '用户名',
    name: 'username',
    id: 'username',
    allowBlank: false,
    vtype: 'alphanum',
    maxLength: 20,
    async: {
        url: '/check_username.php',  // 校验用户名的后台接口
        timeout: 2000,  // 超时时间
        method: 'POST',  // 请求方法为POST
        scope: this,  // 作用域为当前组件
        success: function(response){
            var data = Ext.JSON.decode(response.responseText);
            // 根据后台返回的数据进行校验
            if(data.success){
                return true;
            }else{
                return data.msg;
            }
        },
        failure: function(response){
            // 校验失败时的处理
            Ext.Msg.alert('提示', '请求失败，请稍后再试！');
        }
    }
}

在以上代码中，我们设置了异步校验的相关参数，包括异步请求的地址、超时时间、请求方法、作用域等。同时，我们定义了当异步请求成功时的处理方法和失败时的处理方法。成功时我们可以根据后台返回的数据进行校验，失败时我们弹出一个提示框。

示例说明

下面我将给出两个示例说明：

示例1

假设我们需要校验一个电话号码是否已经被注册。我们可以设置一个异步校验规则，在后台查询该电话号码是否已经存在。如果该电话号码已经存在，则校验失败。

{
    xtype: 'textfield',
    fieldLabel: '电话号码',
    name: 'phone',
    id: 'phone',
    allowBlank: false,
    vtype: 'phone',  // 使用phone类型校验输入
    async: {
        url: '/check_phone.php',  // 校验电话号码的后台接口
        timeout: 2000,
        method: 'POST',
        scope: this,
        success: function(response){
            var data = Ext.JSON.decode(response.responseText);
            if(data.success){
                return true;
            }else{
                return data.msg;
            }
        },
        failure: function(response){
            Ext.Msg.alert('提示', '请求失败，请稍后再试！');
        }
    }
}

示例2

假设我们需要校验一个商品编号是否已经存在。我们可以设置一个异步校验规则，在后台查询该商品编号是否已经存在。如果该商品编号已经存在，则校验失败。

{
    xtype: 'textfield',
    fieldLabel: '商品编号',
    name: 'goods_no',
    id: 'goods_no',
    allowBlank: false,
    maxLength: 20,
    async: {
        url: '/check_goods_no.php',  // 校验商品编号的后台接口
        timeout: 2000,
        method: 'POST',
        scope: this,
        success: function(response){
            var data = Ext.JSON.decode(response.responseText);
            if(data.success){
                return true;
            }else{
                return data.msg;
            }
        },
        failure: function(response){
            Ext.Msg.alert('提示', '请求失败，请稍后再试！');
        }
    }
}

以上就是“Extjs表单输入框异步校验的插件实现方法”的详细攻略，希望能够帮助到你！