一、效果如图所示
特点：
2、可在用户停止输入后自动校验，避免频繁进行无谓的后台校验；
3、以插件方式实现，方便使用；
二、插件源码如下：
rush:js;">
/**
* 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))
}
});
三、应用方式
rush:js;">
{name:'equipmentLedgerCategoryName',fieldLabel:'分类名称',allowBlank:false,afterLabelTextTpl :'
',plugins:{ptype: 'fieldajaxverify',url:'/service/uniquenessCheckName'}}
可用配置项：
1、buffer 毫秒数（在多少毫秒内用户没有输入操作则自动向后台发送验证请求
2、timeout ajax请求超时限制（毫秒数）
3、getParams(field,value) 自定义ajax参数内容
四、后台服务提供的数据格式
rush:js;">
{
"resultCode" : 0,"result" : {
"message" : "分类名称重复","success" : false
},"msgid" : "41c2c52c-66d4-49c5-be52-0158e71cfe2c","success" : true
}
备注：在Extjs5.1下测试通过，有其他个性化需求可参考此插件进行实现，谢谢。
以上所述是小编给大家介绍的Extjs表单输入框异步校验的插件实现方法。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
