Extjs表单输入框异步校验的插件实现方法
程序员文章站
2023-11-10 20:22:58
一、效果如图所示
特点:
1、异步后台校验不会对用户操作产生阻塞感;
2、可在用户停止输入后自动校验,避免频繁进行无谓的后台校验;
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表单输入框异步校验的插件实现方法,希望对大家有所帮助
下一篇: JS 的 Document对象