正文

目录视图摘要视图订阅 基于Extjs开发不允许为空的文本框提示及相应的验证错误提示(转)

IP云
IP云V管理员/0 阅读
07/27
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

原文地址:http://blog.csdn.net/kunoy/article/details/8007585

本文主要解决问题：

1、区分哪些文本框不允许为空，很多网站都采用在文本框后加*号，extjs也可以用lable组件标识，但这样做很麻烦，每一个不允许为空的文本框都需要多加一个lable组件，如果用一个方法自动为不允许为空的文本框加上这个*号，在form等布局的情况下，也是可行的，但如果是absolute布局，你会发现界面就不那么舒畅了。

2、添加文本框验证错误提示，如果你采用的是form布局，extjs已经自带了在文本框后加一个红色感叹号的提示，但往往很多界面采用的是absolute布局，这时红色感叹号就打死也不会出现了，本文就解决这一问题，并且在点击保存时统一验证每一个文本框，如果存在验证错误，提示错误信息并返回。

extjs自带的在form布局下的错误提示：

首先定义样式：

设置不允许为空的文本框属性如下：

当然如果一个界面需要设置的textField太多，可定义方法：

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);

  1. setValidIcon(con,this);
  2. return false;
  3. }
  4. this.clearInvalid();
  5. return true;
  6. }
  7. function setValidIcon(con,obj){
  8. if(con==null){
  9. var x0=0,y0=0;
  10. x0=(obj.x+obj.getWidth()-18)||(obj.getWidth()+85);
  11. y0=obj.y||0;
  12. if(obj.getXType()=="combo"||obj.getXType()=='treecombo'||obj.getXType()=="datefield"||obj.getXType()=="fileuploadfield"){
  13. var wid=document.getElementById(obj.id).style.width;
  14. wid=wid.substring(0,wid.length-2);
  15. x0=Number(wid);
  16. y0=0;
  17. }
  18. var parentNode=document.getElementById(obj.id).parentNode;
  19. var newChild=document.createElement("div");
  20. newChild.setAttribute("name","invalid-icon");
  21. newChild.setAttribute("id",obj.id+"icon");
  22. newChild.setAttribute("class","x-form-invalid-icon");
  23. newChild.setAttribute("className","x-form-invalid-icon");
  24. newChild.setAttribute("style","left:"+x0+"px; top:"+y0+"px; visibility: visible;z-index:10;");
  25. parentNode.appendChild(newChild);
  26. }
  27. }

网上也有一段重写validateValue的方法，笔者也是从那里借鉴过来的，表示感谢，但那段代码直接从本质上重写了：自己写代码判断文本框是否为空，是否满足Vtype设置，是否满足validator函数等，其中就漏掉了日期控件对日期格式的验证方法，好吧，我们就去extjs里面找这段方法吧（笔者有点傻，还真去找了，可惜没找到）。最后仔细看了extjs的validateValue方法，都调用了getErrors()方法，也就是说所有错误验证都在这个方法里面，而我们并不需要改写这个方法，只是增加一个验证提示，故修改为：

  1. var error = this.getErrors(value)[0];
  2. if (error != undefined) {
  3. this.markInvalid(error);
  4. setValidIcon(con,this);
  5. return false;
  6. }
  7. this.clearInvalid();
  8. return true;

其中setValidIcon(con,this)就是增加错误提示。最后效果如下：

  说明：笔者将红色感叹号设置在文本框范围内，从而不影响布局效果，使用getErrors之后，效果真完美，所有allowBlank,vtype,validator,maxValue,minValue,format等该验证的都验证了。

     下面就解决如果清除这个感叹号提示，一种方法是在validateValue里增加清除，比如：

  1. Ext.form.TextField.prototype.validateValue = function(value){
  2. var iconid=this.id+"icon";
  3. var con=document.getElementById(iconid);
  4. var error = this.getErrors(value)[0];
  5. if (error != undefined) {
  6. this.markInvalid(error);
  7. setValidIcon(con,this);
  8. return false;
  9. }
  10. if(Ext.get(iconid)){
  11. Ext.get(iconid).remove();//在这里清除
  12. }
  13. this.clearInvalid();
  14. return true;
  15. }

由于联系到笔者之前写的clearAll()函数，即当你需要清空一个文本框，并且清除错误提示，不可能还另外多写一句Ext.get(iconid).remove()吧？故笔者再重写clearInvalid方法：

  1. Ext.form.TextField.prototype.clearInvalid=function(){
  2. if (this.rendered && !this.preventMark) {
  3. this.el.removeClass(this.invalidClass);
  4. var mt = this.getMessageHandler();
  5. if(mt){
  6. mt.clear(this);
  7. }else if(this.msgTarget){
  8. this.el.removeClass(this.invalidClass);
  9. var t = Ext.getDom(this.msgTarget);
  10. if(t){
  11. t.innerHTML = '';
  12. t.style.display = 'none';
  13. }
  14. }
  15. var iconid=this.id+"icon";
  16. if(Ext.get(iconid)){
  17. Ext.get(iconid).remove();
  18. }
  19. }
  20. this.unsetActiveError();
  21. }

到此完整解决了我们需要的提示，最后添加一个函数，当保存时判断哪些文本框是验证错误的。

  1. function checkVtype(){
  2. var re=true;
  3. Ext.ComponentMgr.all.each(function(cmp){
  4. var Type=cmp.getXType();
  5. if(Type=='textfield'||Type=='combo'||Type=='treecombo'||Type=='datefield'||Type=='numberfield'||Type=='textarea'||Type=='timefield'||Type=='trigger'){
  6. if(cmp.isVisible()){
  7. var va=cmp.isValid();
  8. re=va?re:va;
  9. }
  10. }
  11. });
  12. if(re==false)
  13. Ext.MessageBox.show({title: '错误',msg: "您输入的信息验证错误，请核对后再执行该操作！<br/><span style='color:brown;'>错误原因：</span><span style='color:red;'>格式不正确或输入值为空。</span>",buttons: Ext.MessageBox.OK,icon: Ext.MessageBox.ERROR});
  14. return re;
  15. }

checkVtype()返回true,验证正确，返回false，验证错误。

原文地址:http://blog.csdn.net/kunoy/article/details/8007585