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

一、效果如图所示

特点：

1、异步后台校验不会对用户操作产生阻塞感；

2、可在用户停止输入后自动校验，避免频繁进行无谓的后台校验；

3、以插件方式实现，方便使用；

二、插件源码如下：

/**
* created by jiawenjun on 2016/10/19.
*/
ext.define('ext.ux.plugins.fieldajaxverify',{
　　extend: 'ext.abstractplugin',
　　alias: 'plugin.fieldajaxverify',
　　buffer:500,
　　url:'',
　　timeout:1000,
　　connectionfailure:'服务器连接失败'
　　init:function(field){
　　　　var me=this;
　　　　var params=me.params;
　　　　field.enablekeyevents=true;
　　　　field.on('keyup',ext.function.createbuffered(function(field,e){
　　　　var value=field.getvalue();
　　　　if(ext.isempty(value)){
　　　　　　return;
　　　　}
　　　　var params=field.up('form').getvalues();
　　　　if(ext.isfunction(me.getparams)){
　　　　　　params=me.getparams(field,value);
　　　　}
ext.ajax.request({
url:me.url,
method:"post",
params:params,
timeout: me.timeout,
contenttype: "application/json; charset=utf-8",
success:function(response){
var obj = ext.json.decode(response.responsetext);
if(obj.result["success"]===true){
field.setvalidation(true);
field.validate();
}else{
field.setvalidation(obj.result["message"]);
field.validate();
}
},
failure:function(response){
var result = ext.json.decode(response.responsetext);
field.setvalidation(me.connectionfailure);
field.validate();
}
});
},me.buffer))
}
});

三、应用方式

{name:'equipmentledgercategoryname',fieldlabel:'分类名称' ,allowblank:false ,afterlabeltexttpl :'
<span style="color:red;font-weight:bold" data-qtip="必填项">*</span>'
,plugins:{ptype: 'fieldajaxverify',url:'/service/uniquenesscheckname'}}

可用配置项：

1、buffer 毫秒数（在多少毫秒内用户没有输入操作则自动向后台发送验证请求

2、timeout ajax请求超时限制（毫秒数）

3、getparams(field,value) 自定义ajax参数内容

四、后台服务提供的数据格式

{
  "resultcode" : 0,
  "result" : {
    "message" : "分类名称重复",
    "success" : false
  },
  "msgid" : "41c2c52c-66d4-49c5-be52-0158e71cfe2c",
  "success" : true
} 

备注：在extjs5.1下测试通过，有其他个性化需求可参考此插件进行实现，谢谢。

以上所述是小编给大家介绍的extjs表单输入框异步校验的插件实现方法，希望对大家有所帮助