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 相关文章推荐
cloudgamer出品ImageZoom 图片放大效果
Apr 01 Javascript
javascript Window及document对象详细整理
Jan 12 Javascript
jQuery中trigger()方法用法实例
Jan 19 Javascript
简单纯js实现点击切换TAB标签实例
Aug 23 Javascript
JavaScript转换与解析JSON方法实例详解
Nov 24 Javascript
理解js回收机制通俗易懂版
Feb 29 Javascript
JavaScript笔记之数据属性和存储器属性
Mar 31 Javascript
JS中作用域和变量提升(hoisting)的深入理解
Oct 31 Javascript
vue.js学习之UI组件开发教程
Jul 03 Javascript
js数组去重的N种方法(小结)
Jun 07 Javascript
解决vue props 拿不到值的问题
Sep 11 Javascript
echarts实现折线图的拖拽效果
Dec 19 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
允许phpmyadmin空密码登录的配置方法
2011/05/29 PHP
apache配置虚拟主机的方法详解
2013/06/17 PHP
解析php中获取url与物理路径的总结
2013/06/21 PHP
PHP图片等比缩放类SimpleImage使用方法和使用实例分享
2014/04/10 PHP
javascript 基础篇2 数据类型,语句,函数
2012/03/14 Javascript
jquery实现select选中行、列合计示例
2014/04/25 Javascript
页面加载完后自动执行一个方法的js代码
2014/09/06 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
2015/05/13 Javascript
JavaScript中pop()方法的使用教程
2015/06/09 Javascript
详解JavaScript函数
2015/12/01 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
2016/08/01 Javascript
jquery  实现轮播图详解及实例代码
2016/10/12 Javascript
jquery Form轻松实现文件上传
2017/05/24 jQuery
js实现城市级联菜单的2种方法
2017/06/23 Javascript
修改Nodejs内置的npm默认配置路径方法
2018/05/13 NodeJs
vue中keep-alive的用法及问题描述
2018/05/15 Javascript
jQuery实现获取动态添加的标签对象示例
2018/06/28 jQuery
Bootstrap 模态框自定义点击和关闭事件详解
2018/08/10 Javascript
Vue项目接入Paypal实现示例详解
2020/06/04 Javascript
[01:42]辉夜杯战队访谈宣传片—FANTUAN
2015/12/25 DOTA
[01:01:41]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第二场 1月31日
2021/03/11 DOTA
Python批量创建迅雷任务及创建多个文件
2016/02/13 Python
Python之reload流程实例代码解析
2018/01/29 Python
python xlsxwriter库生成图表的应用示例
2018/03/16 Python
对PyTorch torch.stack的实例讲解
2018/07/30 Python
用Django写天气预报查询网站
2018/10/21 Python
Python enumerate函数遍历数据对象组合过程解析
2019/12/11 Python
Python实现从N个数中找到最大的K个数
2020/04/02 Python
sort命令的作用和用法
2012/11/04 面试题
社区领导班子四风问题原因分析及整改措施
2014/09/28 职场文书
社会实践活动总结
2015/02/05 职场文书
索赔员岗位职责
2015/02/15 职场文书
2015年“公民道德宣传日”活动方案
2015/05/06 职场文书
保外就医申请书范文
2015/08/06 职场文书
php中配置文件保存修改操作 如config.php文件的读取修改等操作
2021/05/12 PHP
python异常中else的实例用法
2021/06/15 Python