打造自己的asp.net验证控件

原创 2008年04月01日 10:40:00

       ASP.NET自带的验证控件具有使用方便,开发快捷等优点。开发人员不必使用js就可以方便地对页面各项控件进行输入验证。但是它也有些不足之处,如:界面单调, 只能通过红色字体显示(当然自定义验证控件除外);只能放在某一固定位置;需要占用一定的版面空间,如果错误消息比较长,会严重影响布局,即使将显示方式设为dynamic,当它显示错误消息时会撑大页面,影响美观,因此,我们有必要对它稍改进一下。

     我们研究一下ASP.NET的js代码(下载页面中WebResource.axd?d=SD1NUwMQGhYXe3jLq5kyhRg80avbG6v4rFgfT8pf7Lg1&t=633409665581718750指向的文件)发现用来显示错误消息的是ValidatorUpdateDisplay这个函数来完成的,关键的一句,是 val.style.visibility = val.isvalid ? "hidden" : "visible"; 如果我们想用alert方式显示的话,只需将这句改成alert(val.innerHTML)就可以了,但我们想做得更好看一点,做成类似于QQ聊天窗口的效果,效果可看下图:

 

 

 

 

 

 

要实现这个效果,需要以下几个图片。

  以下是源码:

<%...@ Page Language="C#" AutoEventWireup="true" CodeBehind="myvalid.aspx.cs" Inherits="Test.myvalid" %>
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    
<title>无标题页</title>

<style>...

.MsgC
{...}{
    border-top
:solid 1px #C6C3C6;
    height
:6px;
    background-color
:#FFFBEF;
    font-size
:1px;
}

.MsgL
{...}{
    
  
    BACKGROUND
: url(images/vMsgL.gif)  no-repeat left top;
    width
:7px;
    height
:6px;
    
}

.MsgR
{...}{
 
    BACKGROUND
: url(images/vMsgR.gif)  no-repeat  ;
   
    width
:24px;
    height
:6px;
}

.MsgBL
{...}{
    
  
     
    BACKGROUND
: url(images/vMsgBL.gif)  no-repeat left top;
     width
:7px;
    height
:6px;
  
  
  
    
}

.MsgBC
{...}{
     
     
    BACKGROUND
: url(images/vMsgBC.gif)  repeat-x;
    height
:19px;
    
}

.MsgBR
{...}{
    
 
     
    BACKGROUND
: url(images/vMsgBR.gif)  no-repeat left top;
    width
:24px;
    height
:19px;
    
}


</style>
</head>
<body style="font-size:12px">
    
<form id="form1" runat="server">
       
<div style="font-weight:bold;height:60px"> 打造自己的验证控件:</div>
       
        姓名:
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" Display="dynamic" ControlToValidate="TextBox1"
            ErrorMessage
="请输入姓名!" SetFocusOnError="True"></asp:RequiredFieldValidator><br />
        证件号:
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
        
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" Display="dynamic" ControlToValidate="TextBox2"
            ErrorMessage
="请输入证件号!" SetFocusOnError="True"></asp:RequiredFieldValidator>
        
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server"  Display="dynamic" ControlToValidate="TextBox2"
            ErrorMessage
="证件号格式不符!" ValidationExpression="d{17}[d|X]|d{15}"></asp:RegularExpressionValidator><br />
        
<asp:Button ID="Button1" runat="server" Text="确定" />
        
    
    
</form>
</body>
</html>

<script type="text/javascript">...

 
function ValidatorUpdateDisplay(val) ...{
    
if (typeof(val.display) == "string"...{
        
if (val.display == "None"...{
            
return;
        }

        
if (val.display == "Dynamic"...{
            
//val.style.display = val.isvalid ? "none" : "inline";
           // return;
        }

    }

    
if ((navigator.userAgent.indexOf("Mac"> -1&&
        (navigator.userAgent.indexOf(
"MSIE"> -1)) ...{
        val.style.display 
= "inline";
    }

    ShowZfValidMsg(val);
   
// val.style.visibility = val.isvalid ? "hidden" : "visible";
}


function Page_ClientValidate(validationGroup) ...{
    Page_InvalidControlToBeFocused 
= null;
    
if (typeof(Page_Validators) == "undefined"...{
        
return true;
    }

    
var i;
    
for (i = 0; i < Page_Validators.length; i++...{
        
        ValidatorValidate(Page_Validators[i], validationGroup, 
null);
        
//Added By zhaofeng
        if(!Page_Validators[i].isvalid)// only show one  errmsg
        ...{
            Page_IsValid 
= false;
            Page_BlockSubmit 
= !Page_IsValid;
            
return false;
        }

        
//Added End
    }

    
    ValidatorUpdateIsValid();
 
    ValidationSummaryOnSubmit(validationGroup);
    Page_BlockSubmit 
= !Page_IsValid;
    
return Page_IsValid;
}


function ShowZfValidMsg(val)
...{   
    
//window.status = val.isvalid;
    var tbId  = "tbValidMsg";//+val.controltovalidate;
    var tb = document.getElementById(tbId);
    
if(val.isvalid && tb == nullreturn;
    
    
if(tb == null)
    
...{
        tb 
= document.createElement("table");
        tb.border
= 0 ;
        tb.id 
= tbId;
        tb.cellSpacing 
= 0 ;
        tb.cellPadding 
= 0 ;
        
var tr = tb.insertRow(0);
        
var cell = tr.insertCell(0);
        cell.className 
= "MsgL";
        
        cell 
=  tr.insertCell(1);
        cell.className  
= "MsgC";
        cell.innerHTML 
= "&nbsp;";
       
        cell 
=  tr.insertCell(2);
        
        cell.className  
= "MsgR";
        
//the second row
        tr = tb.insertRow(1);
        cell 
= tr.insertCell(0);
        cell.bgColor 
= "#FFFBEF";
        cell.style.cssText
=  "border-left:solid 1px #C6C3C6";
        cell.innerHTML 
= "&nbsp;"
        cell 
= tr.insertCell(1);
        cell.bgColor 
= "#FFFBEF";
        cell.height  
= 40;
        cell.innerHTML 
= "<div style='float:left;padding-top:1px'><img src='images/yellowalert.gif' /></div>"+
        
"<span style='color:black;font-size:12px;height:40px;width:100px;padding-top:10px;padding-bottom:10px;padding-right:0px;padding-left:3px'></span>";
        
        cell 
= tr.insertCell(2);
        cell.bgColor 
= "#FFFBEF";
        cell.style.cssText
=  "border-right:solid 1px #C6C3C6";
        cell.innerHTML 
= "&nbsp;"
        
//the third row
        tr = tb.insertRow(2);
        cell 
= tr.insertCell(0);
        cell.className 
= "MsgBL";
        cell 
=  tr.insertCell(1);
        cell.innerHTML 
= "&nbsp;";
        cell.className  
= "MsgBC";
        cell 
=  tr.insertCell(2);
        
        cell.className  
= "MsgBR";
        document.body.appendChild(tb);
        tb.style.cssText
= "position:absolute;zIndex:500";
    }

    tb.rows[
1].cells[1].childNodes[1].innerHTML = val.innerHTML;
    tb.style.display 
= val.isvalid?"none":"";
    
var obj = document.getElementById(val.controltovalidate);
    
if(obj !=null)
    
...{
        
var ary = GetElePos(obj);
        
var l = ary[0]+obj.offsetWidth-tb.offsetWidth;
        
if(l<0) l= 0 ;
        
var t = ary[1]-tb.offsetHeight+15;
        
if(t<0) t = 0 ;
        tb.style.left 
= l 
        tb.style.top 
= t;
    }

    
return ;
    
}

  
function GetElePos(e)
    
...{
        
var t=e.offsetTop; 
         
var l=e.offsetLeft; 
         
while(e=e.offsetParent)...
         t
+=e.offsetTop; 
         l
+=e.offsetLeft; 
         }
 
         
return [l, t];
    }

</script>

 

如果想在整个系统中应用这个效果的话,只需将页面尾部的javascript脚本封装到一个js文件中,放在需要应用的页面的尾部,无需再添加任何代码。

 

 

 

 

打造自己的asp.net验证控件

转载:cpp2017(慕白兄)的专栏 看到好东西,备份一下  ASP.NET自带的验证控件具有使用方便,开发快捷等优点。开发人员不必使用js就可以方便地对页面各项控件进行输入验证。但是它也有些不足之处...
  • lanwilliam
  • lanwilliam
  • 2008年04月02日 10:05
  • 324

asp.net 数据验证控件的使用实例

asp.net 数据控件的使用
  • hoho_12
  • hoho_12
  • 2016年04月27日 18:31
  • 2074

ASP.NET验证控件失效的问题

我也曾经碰到过这样的问题,后来我解决了!以下是我的分析:问题的原因:你本地的机器和服务器上的装的.NET   Framework的版本不是一样的!因为asp.net的验证控件验证都是需要.NET   ...
  • ruanruoshi
  • ruanruoshi
  • 2006年04月11日 10:06
  • 2935

Asp.net中CompareValidator控件中的验证日期问题

众所周知,asp.net封装了很多验证控件,这些控件可以在客户端很方便地进行一些验证,无需发送到...
  • u010185292
  • u010185292
  • 2014年11月08日 12:04
  • 299

ASP.net验证控件

ASP.net提供了6种验证控件,这些控件不但可以使程序员轻松地实现对用户输入的验证,而且还可以选择验证在服务器端进行还是在客户端进行。这6中验证控件分别是: 1.RequiredFieldVali...
  • chenyanmoting
  • chenyanmoting
  • 2015年01月07日 08:06
  • 1704

初识ASP.NET---ASP.NET中验证控件的用法

ASP.NET中验证控件的用法(转) 用于检查是否有输入值:RequiredFieldValidator(必须字段验证) 按设定比较两个输入:CompareValidator(比较验证)  输入是否在...
  • Senior_lee
  • Senior_lee
  • 2014年07月05日 11:17
  • 2100

ASP.NET六种验证控件详解

 ASP.NET是微软推出的下一代WEB开发工具,我们来看看ASP.NET的验证控件,感受ASP.NET的强大功能。 有了ASP.NET,你不但可以轻松的实现对用户输入的验证,而且,还可以选择验证在服...
  • kinsonchan
  • kinsonchan
  • 2007年08月14日 15:44
  • 352

ASP.NET验证控件出现问题后的解决方案

最近自己在做一个项目练练手,之前发过一篇关于ASP.NET验证控件集合的博客,因为之前都没出现过问题,所以今天没想到在实际使用的时候出现了问题,感觉很奇怪,又感觉很惊奇,代码的世界真是无奇不有啊! ...
  • u010792238
  • u010792238
  • 2014年03月28日 12:12
  • 1535

asp.net 验证控件失效的解决办法

已测试     asp.net2.0 服务端 ISAPI  扩展中 没有注册 .axd 使用下列方法注册        主机不支持axd扩展造成的 2.0使用了一个WebResource.axd的资源...
  • JavaGosling
  • JavaGosling
  • 2007年01月15日 16:32
  • 2240

ASP.NET表单验证之基本验证控件一

Asp.net为我们提供了六个验证验证控件及其要起作用必须设置的属性:(1)     RequiredFieldValidator:该控件要求其绑定的输入控件一定要有输入值,不能为空;属性:Contr...
  • hongdi
  • hongdi
  • 2010年02月04日 00:24
  • 2131
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:打造自己的asp.net验证控件
举报原因:
原因补充:

(最多只允许输入30个字)