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

2021-07-06 05:57:54

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" %>
转载: 打造自己的asp.net验证控件

<html xmlns="http://www.w3.org/1999/xhtml" >
转载: 打造自己的asp.net验证控件

<head runat="server">
转载: 打造自己的asp.net验证控件

<title>无标题页</title>
转载: 打造自己的asp.net验证控件

<style>

.MsgC

{

border-top:solid 1px #C6C3C6;
转载: 打造自己的asp.net验证控件

height:6px;
转载: 打造自己的asp.net验证控件

background-color:#FFFBEF;
转载: 打造自己的asp.net验证控件

font-size:1px;
转载: 打造自己的asp.net验证控件

}

.MsgL

{

BACKGROUND: url(images/vMsgL.gif) no-repeat left top;
转载: 打造自己的asp.net验证控件

width:7px;
转载: 打造自己的asp.net验证控件

height:6px;
转载: 打造自己的asp.net验证控件

}

.MsgR

{

BACKGROUND: url(images/vMsgR.gif) no-repeat ;
转载: 打造自己的asp.net验证控件

width:24px;
转载: 打造自己的asp.net验证控件

height:6px;
转载: 打造自己的asp.net验证控件

}

.MsgBL

{

BACKGROUND: url(images/vMsgBL.gif) no-repeat left top;
转载: 打造自己的asp.net验证控件

width:7px;
转载: 打造自己的asp.net验证控件

height:6px;
转载: 打造自己的asp.net验证控件

}

.MsgBC

{

BACKGROUND: url(images/vMsgBC.gif) repeat-x;
转载: 打造自己的asp.net验证控件

height:19px;
转载: 打造自己的asp.net验证控件

}

.MsgBR

{

BACKGROUND: url(images/vMsgBR.gif) no-repeat left top;
转载: 打造自己的asp.net验证控件

width:24px;
转载: 打造自己的asp.net验证控件

height:19px;
转载: 打造自己的asp.net验证控件

}

</style>

</head>

<body style="font-size:12px">
转载: 打造自己的asp.net验证控件

<form id="form1" runat="server">
转载: 打造自己的asp.net验证控件

<div style="font-weight:bold;height:60px"> 打造自己的验证控件：</div>
转载: 打造自己的asp.net验证控件

姓名：<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
转载: 打造自己的asp.net验证控件

<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" Display="dynamic" ControlToValidate="TextBox1"
转载: 打造自己的asp.net验证控件

ErrorMessage="请输入姓名！" SetFocusOnError="True"></asp:RequiredFieldValidator><br />
转载: 打造自己的asp.net验证控件

证件号：<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
转载: 打造自己的asp.net验证控件

<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" Display="dynamic" ControlToValidate="TextBox2"
转载: 打造自己的asp.net验证控件

ErrorMessage="请输入证件号!" SetFocusOnError="True"></asp:RequiredFieldValidator>
转载: 打造自己的asp.net验证控件

<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" Display="dynamic" ControlToValidate="TextBox2"
转载: 打造自己的asp.net验证控件

ErrorMessage="证件号格式不符！" ValidationExpression="d{17}[d|X]|d{15}"></asp:RegularExpressionValidator><br />
转载: 打造自己的asp.net验证控件

<asp:Button ID="Button1" runat="server" Text="确定" />
转载: 打造自己的asp.net验证控件

</form>

</body>

</html>

function ValidatorUpdateDisplay(val) {
转载: 打造自己的asp.net验证控件

if (typeof(val.display) == "string") {
转载: 打造自己的asp.net验证控件

if (val.display == "None") {
转载: 打造自己的asp.net验证控件

return;

}

if (val.display == "Dynamic") {
转载: 打造自己的asp.net验证控件

//val.style.display = val.isvalid ? "none" : "inline";
转载: 打造自己的asp.net验证控件

// return;
转载: 打造自己的asp.net验证控件

}

if ((navigator.userAgent.indexOf("Mac") > -1) &&
转载: 打造自己的asp.net验证控件

(navigator.userAgent.indexOf("MSIE") > -1)) {
转载: 打造自己的asp.net验证控件

val.style.display = "inline";
转载: 打造自己的asp.net验证控件

}

ShowZfValidMsg(val);
转载: 打造自己的asp.net验证控件

// val.style.visibility = val.isvalid ? "hidden" : "visible";
转载: 打造自己的asp.net验证控件

}

function Page_ClientValidate(validationGroup) {
转载: 打造自己的asp.net验证控件

Page_InvalidControlToBeFocused = null;
转载: 打造自己的asp.net验证控件

if (typeof(Page_Validators) == "undefined") {
转载: 打造自己的asp.net验证控件

return true;
转载: 打造自己的asp.net验证控件

}

var i;

for (i = 0; i < Page_Validators.length; i++) {
转载: 打造自己的asp.net验证控件

ValidatorValidate(Page_Validators[i], validationGroup, null);
转载: 打造自己的asp.net验证控件

//Added By zhaofeng
转载: 打造自己的asp.net验证控件

if(!Page_Validators[i].isvalid)// only show one errmsg
转载: 打造自己的asp.net验证控件

{

Page_IsValid = false;
转载: 打造自己的asp.net验证控件

Page_BlockSubmit = !Page_IsValid;
转载: 打造自己的asp.net验证控件

return false;
转载: 打造自己的asp.net验证控件

}

//Added End
转载: 打造自己的asp.net验证控件

}

ValidatorUpdateIsValid();
转载: 打造自己的asp.net验证控件

ValidationSummaryOnSubmit(validationGroup);
转载: 打造自己的asp.net验证控件

Page_BlockSubmit = !Page_IsValid;
转载: 打造自己的asp.net验证控件

return Page_IsValid;
转载: 打造自己的asp.net验证控件

}

function ShowZfValidMsg(val)
转载: 打造自己的asp.net验证控件

{

//window.status = val.isvalid;
转载: 打造自己的asp.net验证控件

var tbId = "tbValidMsg";//+val.controltovalidate;
转载: 打造自己的asp.net验证控件

var tb = document.getElementById(tbId);
转载: 打造自己的asp.net验证控件

if(val.isvalid && tb == null) return;
转载: 打造自己的asp.net验证控件

if(tb == null)
转载: 打造自己的asp.net验证控件

{

tb = document.createElement("table");
转载: 打造自己的asp.net验证控件

tb.border= 0 ;
转载: 打造自己的asp.net验证控件

tb.id = tbId;
转载: 打造自己的asp.net验证控件

tb.cellSpacing = 0 ;
转载: 打造自己的asp.net验证控件

tb.cellPadding = 0 ;
转载: 打造自己的asp.net验证控件

var tr = tb.insertRow(0);
转载: 打造自己的asp.net验证控件

var cell = tr.insertCell(0);
转载: 打造自己的asp.net验证控件

cell.className = "MsgL";
转载: 打造自己的asp.net验证控件

cell = tr.insertCell(1);
转载: 打造自己的asp.net验证控件

cell.className = "MsgC";
转载: 打造自己的asp.net验证控件

cell.innerHTML = " ";
转载: 打造自己的asp.net验证控件

cell = tr.insertCell(2);
转载: 打造自己的asp.net验证控件

cell.className = "MsgR";
转载: 打造自己的asp.net验证控件

//the second row
转载: 打造自己的asp.net验证控件

tr = tb.insertRow(1);
转载: 打造自己的asp.net验证控件

cell = tr.insertCell(0);
转载: 打造自己的asp.net验证控件

cell.bgColor = "#FFFBEF";
转载: 打造自己的asp.net验证控件

cell.style.cssText= "border-left:solid 1px #C6C3C6";
转载: 打造自己的asp.net验证控件

cell.innerHTML = " "
转载: 打造自己的asp.net验证控件

cell = tr.insertCell(1);
转载: 打造自己的asp.net验证控件

cell.bgColor = "#FFFBEF";
转载: 打造自己的asp.net验证控件

cell.height = 40;
转载: 打造自己的asp.net验证控件

cell.innerHTML = "<div style='float:left;padding-top:1px'><img src='images/yellowalert.gif' /></div>"+
转载: 打造自己的asp.net验证控件

"<span style='color:black;font-size:12px;height:40px;width:100px;padding-top:10px;padding-bottom:10px;padding-right:0px;padding-left:3px'></span>";
转载: 打造自己的asp.net验证控件

cell = tr.insertCell(2);
转载: 打造自己的asp.net验证控件

cell.bgColor = "#FFFBEF";
转载: 打造自己的asp.net验证控件

cell.style.cssText= "border-right:solid 1px #C6C3C6";
转载: 打造自己的asp.net验证控件

cell.innerHTML = " "
转载: 打造自己的asp.net验证控件

//the third row
转载: 打造自己的asp.net验证控件

tr = tb.insertRow(2);
转载: 打造自己的asp.net验证控件

cell = tr.insertCell(0);
转载: 打造自己的asp.net验证控件

cell.className = "MsgBL";
转载: 打造自己的asp.net验证控件

cell = tr.insertCell(1);
转载: 打造自己的asp.net验证控件

cell.innerHTML = " ";
转载: 打造自己的asp.net验证控件

cell.className = "MsgBC";
转载: 打造自己的asp.net验证控件

cell = tr.insertCell(2);
转载: 打造自己的asp.net验证控件

cell.className = "MsgBR";
转载: 打造自己的asp.net验证控件

document.body.appendChild(tb);
转载: 打造自己的asp.net验证控件

tb.style.cssText= "position:absolute;zIndex:500";
转载: 打造自己的asp.net验证控件

}

tb.rows[1].cells[1].childNodes[1].innerHTML = val.innerHTML;
转载: 打造自己的asp.net验证控件

tb.style.display = val.isvalid?"none":"";
转载: 打造自己的asp.net验证控件

var obj = document.getElementById(val.controltovalidate);
转载: 打造自己的asp.net验证控件

if(obj !=null)
转载: 打造自己的asp.net验证控件

{

var ary = GetElePos(obj);
转载: 打造自己的asp.net验证控件

var l = ary[0]+obj.offsetWidth-tb.offsetWidth;
转载: 打造自己的asp.net验证控件

if(l<0) l= 0 ;
转载: 打造自己的asp.net验证控件

var t = ary[1]-tb.offsetHeight+15;
转载: 打造自己的asp.net验证控件

if(t<0) t = 0 ;
转载: 打造自己的asp.net验证控件

tb.style.left = l
转载: 打造自己的asp.net验证控件

tb.style.top = t;
转载: 打造自己的asp.net验证控件

}

return ;

}

function GetElePos(e)
转载: 打造自己的asp.net验证控件

{

var t=e.offsetTop;
转载: 打造自己的asp.net验证控件

var l=e.offsetLeft;
转载: 打造自己的asp.net验证控件

while(e=e.offsetParent){
转载: 打造自己的asp.net验证控件

t+=e.offsetTop;
转载: 打造自己的asp.net验证控件

l+=e.offsetLeft;
转载: 打造自己的asp.net验证控件

}

return [l, t];
转载: 打造自己的asp.net验证控件

}

</script>

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

版权

作者：灵动生活郝宪玮

出处：http://www.cnblogs.com/ywqu

如果你认为此文章有用，请点击底端的【推荐】让其他人也了解此文章，

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

码农公寓

相关文章