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 相关文章推荐
Ajax一统天下之Dojo整合篇
Mar 24 Javascript
仿服务器端脚本方式的JS模板实现方法
Apr 27 Javascript
Javascript 面向对象(二)封装代码
May 23 Javascript
JS模块与命名空间的介绍
Mar 22 Javascript
Javascript 多浏览器兼容总结(实战经验)
Oct 30 Javascript
jQuery.holdReady()使用方法
May 20 Javascript
js全选实现和判断是否有复选框选中的方法
Feb 17 Javascript
Javascript数组Array方法解读
Mar 13 Javascript
jquery html动态添加的元素绑定事件详解
May 24 Javascript
微信小程序 弹窗自定义实例代码
Mar 08 Javascript
微信用户访问小程序的登录过程详解
Sep 20 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
Aug 03 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
把PHP安装为Apache DSO
2006/10/09 PHP
Php Mssql操作简单封装支持存储过程
2009/12/11 PHP
PHP的SQL注入实现(测试代码安全不错)
2011/02/27 PHP
php+mysql实现的无限分类方法类定义与使用示例
2020/05/27 PHP
编辑浪子版表单验证类
2007/05/12 Javascript
指定位置如果有图片显示图片,无图片显示广告的JS
2010/06/05 Javascript
jquery异步跨域访问代码
2013/06/28 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
2015/05/09 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
2016/01/06 Javascript
javascript弹出带文字信息的提示框效果
2016/07/19 Javascript
JS实现页面载入时随机显示图片效果
2016/09/07 Javascript
js实现碰撞检测特效代码分享
2016/10/16 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
2017/03/13 Javascript
Angular在模板驱动表单中自定义校验器的方法
2017/08/09 Javascript
async/await地狱该如何避免详解
2018/05/10 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
2018/07/05 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
2020/11/05 Javascript
Python使用pylab库实现画线功能的方法详解
2017/06/08 Python
Django框架多表查询实例分析
2018/07/04 Python
简单了解python变量的作用域
2019/07/30 Python
python能做什么 python的含义
2019/10/12 Python
python 动态调用函数实例解析
2019/10/21 Python
Python函数的默认参数设计示例详解
2019/12/01 Python
Keras在训练期间可视化训练误差和测试误差实例
2020/06/16 Python
HTML5的postMessage的使用手册
2018/12/19 HTML / CSS
HTML5 drag和drop具体使用详解
2021/01/18 HTML / CSS
Carter’s官方旗舰店:美国受欢迎的婴童服装品牌
2018/01/21 全球购物
意大利文具和办公产品在线商店:Y-Office
2020/02/27 全球购物
Perfume’s Club澳大利亚官网:西班牙领先的在线美容店
2021/02/01 全球购物
放飞梦想演讲稿
2014/05/05 职场文书
婚庆答谢词
2015/01/04 职场文书
同学聚会通知短信
2015/04/20 职场文书
2015年小学体育教师工作总结
2015/10/23 职场文书
积极心理学课程心得体会
2016/01/22 职场文书
八年级地理课件资料及考点知识分享
2019/08/30 职场文书
导游词之南京栖霞山
2019/10/18 职场文书