Extjs表單輸入框異步校驗(yàn)的插件實(shí)現(xiàn)方法
一、效果如圖所示
特點(diǎn)：
1、異步后臺(tái)校驗(yàn)不會(huì)對(duì)用戶操作產(chǎn)生阻塞感；
2、可在用戶停止輸入后自動(dòng)校驗(yàn)，避免頻繁進(jìn)行無(wú)謂的后臺(tái)校驗(yàn)；
3、以插件方式實(shí)現(xiàn)，方便使用；
二、插件源碼如下：
/**
* 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:'服務(wù)器連接失敗'
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))
}
});
三、應(yīng)用方式
{name:'equipmentLedgerCategoryName',fieldLabel:'分類名稱' ,allowBlank:false ,afterLabelTextTpl :'
<span style="color:red;font-weight:bold" data-qtip="必填項(xiàng)">*</span>'
,plugins:{ptype: 'fieldajaxverify',url:'/service/uniquenessCheckName'}}
可用配置項(xiàng)：
1、buffer 毫秒數(shù)（在多少毫秒內(nèi)用戶沒(méi)有輸入操作則自動(dòng)向后臺(tái)發(fā)送驗(yàn)證請(qǐng)求
2、timeout ajax請(qǐng)求超時(shí)限制（毫秒數(shù)）
3、getParams(field,value) 自定義ajax參數(shù)內(nèi)容
四、后臺(tái)服務(wù)提供的數(shù)據(jù)格式
{
"resultCode" : 0,
"result" : {
"message" : "分類名稱重復(fù)",
"success" : false
},
"msgId" : "41c2c52c-66d4-49c5-be52-0158e71cfe2c",
"success" : true
}
備注：在Extjs5.1下測(cè)試通過(guò)，有其他個(gè)性化需求可參考此插件進(jìn)行實(shí)現(xiàn)，謝謝。
以上所述是小編給大家介紹的Extjs表單輸入框異步校驗(yàn)的插件實(shí)現(xiàn)方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
uni-app小程序分享功能實(shí)現(xiàn)方法舉例
這篇文章主要給大家介紹了關(guān)于uni-app小程序分享功能實(shí)現(xiàn)方法的相關(guān)資料,uni-app中有分享的API接口,但是需要現(xiàn)在QQ或者微信等開發(fā)者平臺(tái)上注冊(cè)賬號(hào),驗(yàn)證公司信息,而且只能分享圖片或者文本等內(nèi)容,需要的朋友可以參考下2023-07-07
TinyMCE提交AjaxForm獲取不到數(shù)據(jù)的解決方法
ES2020讓代碼更優(yōu)美的運(yùn)算符 (?.) (??)
JS實(shí)現(xiàn)超精簡(jiǎn)的鏈接列表在固定區(qū)域內(nèi)滾動(dòng)效果代碼
javascript實(shí)現(xiàn)checkbox復(fù)選框?qū)嵗a
通過(guò)復(fù)制Table生成word和excel的javascript代碼
通過(guò)JavaScript下載文件到本地的方法（單文件）
