Extjs表单输入框异步校验的插件实现方法
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Extjs表单输入框异步校验的插件实现方法,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2043字,纯文字阅读大概需要3分钟。
内容图文
一、效果如图所示
特点:
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表单输入框异步校验的插件实现方法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。