Extjs表单输入框异步校验的插件实现方法_网络技术

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

发布时间 - 2026-01-11 00:15:55 点击率：次

一、效果如图所示

特点：

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表单输入框异步校验的插件实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# extjs # 表单 # extjs输入框 # JavaScript实现异步提交表单数据 # jquery.form.js异步提交表单详解 # 纯javascript的ajax实现php异步提交表单的简单实例 # javascript将异步校验表单改写为同步表单 # Javascript异步表单提交 # 图片上传 # 兼容异步模拟ajax技术 # JavaScript实现异步获取表单数据 # 小编 # 在此 # 可在 # 给大家 # 会对 # 自定义 # 所述 # 给我留言 # 必填 # 感谢大家 # 输入框 # 如图所示 # 疑问请 # 有任何 # 数据格式 # connectionFailure # function # init # field

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：LinuxNFS挂载失败怎么处理_网络存储排查思路【教程】

下一篇：如何使用Dreamwe*er云建站快速创建个人网站？

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：LinuxNFS挂载失败怎么处理_网络存储排查思路【教程】

下一篇：如何使用Dreamwe*er云建站快速创建个人网站？