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 相关文章推荐
开源的javascript项目Kissy介绍
Nov 28 Javascript
Javascript中实现trim()函数的两种方法
Feb 04 Javascript
Javascript中的几种继承方式对比分析
Mar 22 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
Jun 13 Javascript
AngularJS模仿Form表单提交的实现代码
Dec 08 Javascript
AngularJS 霸道的过滤器小结
Apr 26 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
Apr 28 Javascript
使用Node.js实现ORM的一种思路详解(图文)
Oct 24 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
面试题:react和vue的区别分析
Apr 08 Javascript
Vue-router 报错NavigationDuplicated的解决方法
Mar 31 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
Apr 07 Javascript
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
5.PHP的其他功能
2006/10/09 PHP
PHP实现的简单缓存类
2015/07/29 PHP
详解WordPress中添加友情链接的方法
2016/05/21 PHP
PHP二进制与字符串之间的相互转换教程
2016/10/14 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
PHP实现倒计时功能
2020/11/16 PHP
js列举css中所有图标的实现代码
2011/07/04 Javascript
有关于JS构造函数的重载和工厂方法
2013/04/07 Javascript
可自己添加html的伪弹出框实现代码
2013/09/08 Javascript
JS中操作JSON总结
2020/12/06 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
2014/05/04 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
2016/05/27 Javascript
Vue.js动态添加、删除选题的实例代码
2016/09/30 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
2019/07/27 Javascript
JavaScript创建表格的方法
2020/04/13 Javascript
[50:28]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs KG
2018/04/01 DOTA
python检查字符串是否是正确ISBN的方法
2015/07/11 Python
Python制作简单的网页爬虫
2015/11/22 Python
python使用pil进行图像处理(等比例压缩、裁剪)实例代码
2017/12/11 Python
基于Python3读写INI配置文件过程解析
2020/07/23 Python
windows+vscode安装paddleOCR运行环境的步骤
2020/11/11 Python
新百伦折扣店:Joe’s New Balance Outlet
2016/08/20 全球购物
瑞士领先的网上超市:LeShop.ch
2018/11/14 全球购物
美国林业供应商:Forestry Suppliers
2019/05/01 全球购物
澳大利亚窗帘商店:Curtain Wonderland
2019/12/01 全球购物
信息专业大学生自我评价分享
2014/01/17 职场文书
文秘大学生求职信
2014/02/25 职场文书
教师岗位聘任书范文
2014/03/29 职场文书
感恩寄语大全
2014/04/11 职场文书
党风廉设责任书
2014/04/16 职场文书
领导班子遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
社保转移委托书范本
2014/10/08 职场文书
工作作风建设心得体会
2014/10/22 职场文书
2014年青年教师工作总结
2014/12/17 职场文书
CSS font-variation 可变字体的魅力(实例详解)
2022/03/03 HTML / CSS
分享一个vue实现的记事本功能案例
2022/04/11 Vue.js