打造自己的asp.net验证控件
发布日期:2022-02-05 18:27:42 浏览次数:14 分类:技术文章

本文共 5429 字,大约阅读时间需要 18 分钟。

 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文件中,放在需要应用的页面的尾部,无需再添加任何代码。

 

 

转载地址:https://blog.csdn.net/lisong58420/article/details/2316384 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:实现业务系统中的用户权限管理--设计篇
下一篇:40种网站设计常用技巧

发表评论

最新留言

第一次来,支持一个
[***.219.124.196]2024年03月07日 03时30分21秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

dw1510_超低温种子储存柜 2019-04-21
文件未找到mathpage.wll_解决MathPage.wll文件找不到的问题(找了好久的良心之作)... 2019-04-21
广州刷脸支付骗局_刷脸支付是骗局?那可能你还不了解刷脸支付 2019-04-21
java 远程调试 端口_JAVA远程调试 2019-04-21
java 使用或覆盖了已过时的api_JAVA使用或覆盖了已过时的 API 2019-04-21
java 图片旋转保存_Java 对图片90度旋转 2019-04-21
用java实现文学研究助手_数据结构文学研究助手 C语言代码实现(带源码+解析)... 2019-04-21
java gc的几种方式_GC 的三种基本实现方式 2019-04-21
wget linux java 32_通过wget在Linux上下载Java JDK会显示在许可证页面上 2019-04-21
babylonjs 设置面板位置_babylonjs 空间坐标转为屏幕坐标 2019-04-21
oracle里面如何查询sqlid,CSS_oracle中如何查看sql, --查询表状态:  select uo.O - phpStudy... 2019-04-21
oracle 查询中用case,oracle case when 在查询时候的用法。 2019-04-21
oracle正在运行的程序包,ORACLE PL/SQL编程详解之程序包的创建与应用 2019-04-21
php局部页面滚动,在访问另一页面后保留浏览器滚动位置 - php 2019-04-21
jmeter运行linux命令行,Jmeter在linux上运行(命令行运行Jmeter) 2019-04-21
linux服务器怎么添加站点,如何增加站点或虚拟主机及文件说明 2019-04-21
linux系统输入指令,Linux系统基础 - 基本操作命令 2019-04-21
linux设备管理命令,Linux命令(设备管理).doc 2019-04-21
linux 中文utf-8转gbk编码,Linux平台下 GBK编码转UTF-8编码 2019-04-21
linux安装软件在boot,在Linux系统上安装Spring boot应用的教程详解 2019-04-21