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


Posted in Javascript onMarch 20, 2017

一、效果如图所示

特点:

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

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

3、以插件方式实现,方便使用;

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

二、插件源码如下:

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

Javascript 相关文章推荐
js左侧多级菜单动态的解决方案
Feb 01 Javascript
JS判断元素为数字的奇异写法分享
Aug 01 Javascript
extjs4 treepanel动态改变行高度示例
Dec 17 Javascript
JavaScript必知必会(三) String .的方法来自何方
Jun 08 Javascript
js实现点击图片自动提交action的简单方法
Oct 16 Javascript
Angular 4依赖注入学习教程之ValueProvider的使用(七)
Jun 04 Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
Aug 23 Javascript
解析原来浏览器原生支持JS Base64编码解码
Aug 12 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
Sep 20 Javascript
Vue.js组件使用props传递数据的方法
Oct 19 Javascript
BootstrapValidator验证用户名已存在(ajax)
Nov 08 Javascript
vue element-ul实现展开和收起功能的实例代码
Nov 25 Vue.js
js实现鼠标拖动功能
Mar 20 #Javascript
基于vue2的table分页组件实现方法
Mar 20 #Javascript
详解Weex基于Vue2.0开发模板搭建
Mar 20 #Javascript
基于vue.js实现侧边菜单栏
Mar 20 #Javascript
微信小程序 参数传递实例代码
Mar 20 #Javascript
vue.js指令v-model使用方法
Mar 20 #Javascript
微信小程序中子页面向父页面传值实例详解
Mar 20 #Javascript
You might like
php求一个网段开始与结束IP地址的方法
2015/07/09 PHP
权威JavaScript 中的内存泄露模式
2007/08/13 Javascript
javascript打印大全(打印页面设置/打印预览代码)
2013/03/29 Javascript
jquery中插件实现自动添加用户的具体代码
2013/11/15 Javascript
Ajax提交与传统表单提交的区别说明
2014/02/07 Javascript
JavaScript实现非常简单实用的下拉菜单效果
2015/08/27 Javascript
chrome调试javascript详解
2015/10/21 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
2015/11/04 Javascript
jQuery循环遍历子节点并获取值的方法
2016/04/14 Javascript
前端框架Vue.js中Directive知识详解
2016/09/12 Javascript
BootStrap便签页的简单应用
2017/01/06 Javascript
手把手教你把nodejs部署到linux上跑出hello world
2017/06/19 NodeJs
jQuery实现的简单动态添加、删除表格功能示例
2017/09/21 jQuery
小程序rich-text组件如何改变内部img图片样式的方法
2019/05/22 Javascript
javascript实现简单打字游戏
2019/10/29 Javascript
Python版实现微信公众号扫码登陆
2020/05/28 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
2020/07/07 Javascript
Python元组及文件核心对象类型详解
2018/02/11 Python
Python opencv实现人眼/人脸识别以及实时打码处理
2019/04/29 Python
利用python-pypcap抓取带VLAN标签的数据包方法
2019/07/23 Python
浅谈Pytorch中的torch.gather函数的含义
2019/08/18 Python
Python 中如何实现参数化测试的方法示例
2019/12/10 Python
Python warning警告出现的原因及忽略方法
2020/01/31 Python
Python3开发环境搭建详细教程
2020/06/18 Python
pytorch 计算ConvTranspose1d输出特征大小方式
2020/06/23 Python
乌克兰网上服装店:Bolf.ua
2018/10/30 全球购物
德国苹果商店:MacTrade
2020/05/18 全球购物
上海期货面试题
2014/01/31 面试题
2014年班务工作总结
2014/12/02 职场文书
2015年反洗钱工作总结
2015/04/25 职场文书
2015年基建工作总结范文
2015/05/23 职场文书
银行资信证明
2015/06/17 职场文书
教师节作文之小学四年级
2019/09/03 职场文书
使用kubeadm命令行工具创建kubernetes集群
2022/03/31 Servers
什么是Python装饰器?如何定义和使用?
2022/04/11 Python
本地搭建minio文件服务器(使用bat脚本启动)的方法
2022/07/15 Servers