时间:2021-05-28
一、效果如图所示
特点:
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表单输入框异步校验的插件实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了js简单实现表单中点击按钮动态增加输入框数量的方法。分享给大家供大家参考。具体如下:这里演示表单中点击按钮动态增加输入框数量的方法,默认是没有输入
需求前端开发过程中,经常遇到表单校验的需求,比如校验用户输入框的内容,限制用户只能输入数字。本文内容基于element-ui,el-form组件可以绑定mode
例如:校验输入框只能录入0-1000之间最多有2位小数的数字表单$.extend($.fn.validatebox.defaults.rules,{CHS:{v
form表单输入框input设置disable属性提交后,得不到该输入框的值,解决该类问题可以参考下面两个方法:方法一:使用readonly带替代disable
有个需求,要求对输入框进行启用/禁用的切换,同时在禁用时要清除输入框的校验状态(那个红框)。方法一:修改formItem字段属性在iview的官方api中并没找