Extjs表单输入框异步校验的插件实现方法

 更新时间:2017年03月20日 13:58:22   作者:拉风的帅猫  
这篇文章主要介绍了Extjs表单输入框异步校验的插件实现方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下

一、效果如图所示

特点:

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表单输入框异步校验的插件实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • javascript实现抢购倒计时程序

    javascript实现抢购倒计时程序

    这篇文章主要为大家详细介绍了javascript实现抢购倒计时程序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-08-08
  • js实现百度登录框鼠标拖拽效果

    js实现百度登录框鼠标拖拽效果

    这篇文章主要为大家详细介绍了js实现百度登录框鼠标拖拽效果的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • javaScript 页面自动加载事件详解

    javaScript 页面自动加载事件详解

    本篇文章主要是对javaScript页面自动加载事件进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • 输入npm run xxx后执行原理深入解析

    输入npm run xxx后执行原理深入解析

    这篇文章主要为大家介绍了输入npm run xxx后执行原理深入解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • 一些老手都不一定知道的JavaScript技巧

    一些老手都不一定知道的JavaScript技巧

    这篇文章主要介绍了一些老手都不一定知道的JavaScript技巧,需要的朋友可以参考下
    2014-05-05
  • 微信小程序实现全国机场索引列表

    微信小程序实现全国机场索引列表

    这篇文章主要为大家详细介绍了微信小程序实现全国机场索引列表,实现MUI索引列表,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-01-01
  • js中indexOf()的简单使用示例

    js中indexOf()的简单使用示例

    indexOf在js中有着重要的作用,可以判断一个元素是否在数组中存在,或者判断一个字符是否在字符串中存在,下面这篇文章主要给大家介绍了关于js中indexOf()简单使用的相关资料,需要的朋友可以参考下
    2023-01-01
  • JS实现百度新闻导航栏效果

    JS实现百度新闻导航栏效果

    这篇文章主要为大家详细介绍了JS实现百度新闻导航栏效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • JavaScript获取网页、浏览器、屏幕高度和宽度汇总

    JavaScript获取网页、浏览器、屏幕高度和宽度汇总

    这篇文章主要汇总介绍了JavaScript获取网页、浏览器、屏幕高度和宽度的方法,非常使用,有需要的小伙伴参考下。
    2014-12-12
  • 微信小程序实现banner图轮播效果

    微信小程序实现banner图轮播效果

    这篇文章主要为大家详细介绍了微信小程序实现banner图轮播效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-02-02

最新评论