基于Extjs开发不允许为空的文本框提示及相应的验证错误提示
来源:互联网 发布:mac双系统怎么切换 编辑:程序博客网 时间:2024/06/05 13:26
本文主要解决问题:
1、区分哪些文本框不允许为空,很多网站都采用在文本框后加*号,extjs也可以用lable组件标识,但这样做很麻烦,每一个不允许为空的文本框都需要多加一个lable组件,如果用一个方法自动为不允许为空的文本框加上这个*号,在form等布局的情况下,也是可行的,但如果是absolute布局,你会发现界面就不那么舒畅了。
2、添加文本框验证错误提示,如果你采用的是form布局,extjs已经自带了在文本框后加一个红色感叹号的提示,但往往很多界面采用的是absolute布局,这时红色感叹号就打死也不会出现了,本文就解决这一问题,并且在点击保存时统一验证每一个文本框,如果存在验证错误,提示错误信息并返回。
extjs自带的在form布局下的错误提示:
首先定义样式:
.Diy-text{background-image: url(/skin/images/pen.gif) !important; background-attachment: scroll !important; padding-left: 15px !important; background-position: 3px 50% !important; background-repeat: no-repeat !important;}
设置不允许为空的文本框属性如下:
allowBlank:false,cls:"Diy-text"
当然如果一个界面需要设置的textField太多,可定义方法:
function setDiyTextField(){Ext.ComponentMgr.all.each(function(cmp){var Type=cmp.getXType();if(Type=='textfield'||Type=='fileuploadfield'||Type=='combo'||Type=='treecombo'||Type=='datefield'||Type=='numberfield'||Type=='textarea'||Type=='timefield'||Type=='trigger'){ if(cmp.allowBlank==false){ cmp.cls="Diy-text"; cmp.blankText="该输入项不能为空!"; } } });}
初始化调用setDiyTextField()即可,效果如下:
说明:这里使用background-image,强制覆盖了extjs自己的文本框样式,不仔细看,其实差别很小。
下面该定义validateValue方法了,代码如下:
Ext.form.TextField.prototype.validateValue = function(value){ var iconid=this.id+"icon";var con=document.getElementById(iconid); var error = this.getErrors(value)[0]; if (error != undefined) { this.markInvalid(error); setValidIcon(con,this); return false; } this.clearInvalid(); return true;}function setValidIcon(con,obj){if(con==null){var x0=0,y0=0;x0=(obj.x+obj.getWidth()-18)||(obj.getWidth()+85);y0=obj.y||0;if(obj.getXType()=="combo"||obj.getXType()=='treecombo'||obj.getXType()=="datefield"||obj.getXType()=="fileuploadfield"){var wid=document.getElementById(obj.id).style.width;wid=wid.substring(0,wid.length-2);x0=Number(wid);y0=0;}var parentNode=document.getElementById(obj.id).parentNode; var newChild=document.createElement("div"); newChild.setAttribute("name","invalid-icon"); newChild.setAttribute("id",obj.id+"icon"); newChild.setAttribute("class","x-form-invalid-icon"); newChild.setAttribute("className","x-form-invalid-icon"); newChild.setAttribute("style","left:"+x0+"px; top:"+y0+"px; visibility: visible;z-index:10;"); parentNode.appendChild(newChild); }}
网上也有一段重写validateValue的方法,笔者也是从那里借鉴过来的,表示感谢,但那段代码直接从本质上重写了:自己写代码判断文本框是否为空,是否满足Vtype设置,是否满足validator函数等,其中就漏掉了日期控件对日期格式的验证方法,好吧,我们就去extjs里面找这段方法吧(笔者有点傻,还真去找了,可惜没找到)。最后仔细看了extjs的validateValue方法,都调用了getErrors()方法,也就是说所有错误验证都在这个方法里面,而我们并不需要改写这个方法,只是增加一个验证提示,故修改为:
var error = this.getErrors(value)[0]; if (error != undefined) { this.markInvalid(error); setValidIcon(con,this); return false; } this.clearInvalid(); return true;
其中setValidIcon(con,this)就是增加错误提示。最后效果如下:
说明:笔者将红色感叹号设置在文本框范围内,从而不影响布局效果,使用getErrors之后,效果真完美,所有allowBlank,vtype,validator,maxValue,minValue,format等该验证的都验证了。
下面就解决如果清除这个感叹号提示,一种方法是在validateValue里增加清除,比如:
Ext.form.TextField.prototype.validateValue = function(value){ var iconid=this.id+"icon";var con=document.getElementById(iconid); var error = this.getErrors(value)[0]; if (error != undefined) { this.markInvalid(error); setValidIcon(con,this); return false; } if(Ext.get(iconid)){ Ext.get(iconid).remove();//在这里清除 } this.clearInvalid(); return true;}
由于联系到笔者之前写的clearAll()函数,即当你需要清空一个文本框,并且清除错误提示,不可能还另外多写一句Ext.get(iconid).remove()吧?故笔者再重写clearInvalid方法:
Ext.form.TextField.prototype.clearInvalid=function(){ if (this.rendered && !this.preventMark) { this.el.removeClass(this.invalidClass); var mt = this.getMessageHandler(); if(mt){ mt.clear(this); }else if(this.msgTarget){ this.el.removeClass(this.invalidClass); var t = Ext.getDom(this.msgTarget); if(t){ t.innerHTML = ''; t.style.display = 'none'; } } var iconid=this.id+"icon"; if(Ext.get(iconid)){ Ext.get(iconid).remove(); } } this.unsetActiveError();}
到此完整解决了我们需要的提示,最后添加一个函数,当保存时判断哪些文本框是验证错误的。
function checkVtype(){var re=true;Ext.ComponentMgr.all.each(function(cmp){var Type=cmp.getXType();if(Type=='textfield'||Type=='combo'||Type=='treecombo'||Type=='datefield'||Type=='numberfield'||Type=='textarea'||Type=='timefield'||Type=='trigger'){ if(cmp.isVisible()){ var va=cmp.isValid(); re=va?re:va;} } });if(re==false) Ext.MessageBox.show({title: '错误',msg: "您输入的信息验证错误,请核对后再执行该操作!<br/><span style='color:brown;'>错误原因:</span><span style='color:red;'>格式不正确或输入值为空。</span>",buttons: Ext.MessageBox.OK,icon: Ext.MessageBox.ERROR}); return re;}
checkVtype()返回true,验证正确,返回false,验证错误。
如需转载,请尽量保留此申明,并在文章页面明显位置给出原文连接。谢谢!
- 基于Extjs开发不允许为空的文本框提示及相应的验证错误提示
- 基于Extjs开发不允许为空的文本框提示及相应的验证错误提示
- ExtJS绝对布局文本框提示及相应的错误提示
- Gxt 3.0 修改文本框 为空的 提示
- 错误提示“为空或不是对象”的解决方法
- 登陆输入为空或错误时的提示信息
- easyui 文本框不为空的验证
- 开发中遇到loadnib初始化的时候提示为空
- iOS开发之UITableView数据为空的提示页面
- vb.net & 文本框为空提示,一键清空文本框所有内容
- vb.net & 文本框为空提示,一键清空文本框所有内容
- 自动提示的文本框
- 自动提示的文本框
- 输入文本框【提示文字】的设置与清空
- 出现JS错误提示null为空或不是对象的错误
- HTML 的 form 提交之前如何验证数值不为空? 为空的话提示用户并终止提交
- Swing实现的带提示文本的验证文本框
- 验证多组name一样的文本框是否为空
- Jquery调用C# WebService方法
- Linux帐号管理[中]--用户管理
- socket的send、recv阻塞设置阻塞超时时间
- android如何启动线程
- 一枕落花香
- 基于Extjs开发不允许为空的文本框提示及相应的验证错误提示
- [C/C++] RGBA数组生成Windows下的ico文件
- 2.3.1 Launcher编译与修改
- Unity实例化Prefab in C#
- 作为测试人员,从哪几个方面保证产品质量呢
- 使用rapidxml操作xml~读写文件操作(转)
- Linux帐号管理[下]--用户组管理
- g++对c++0x/c++11的标准支持度
- 突然决定