打造自己的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 == null) return; 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 = " "; 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 = " " 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 = " " //the third row tr = tb.insertRow(2); cell = tr.insertCell(0); cell.className = "MsgBL"; cell = tr.insertCell(1); cell.innerHTML = " "; 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 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
第一次来,支持一个
[***.219.124.196]2024年03月07日 03时30分21秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
dw1510_超低温种子储存柜
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
babylonjs 设置面板位置_babylonjs 空间坐标转为屏幕坐标
2019-04-21
oracle 查询中用case,oracle case when 在查询时候的用法。
2019-04-21
oracle正在运行的程序包,ORACLE PL/SQL编程详解之程序包的创建与应用
2019-04-21
php局部页面滚动,在访问另一页面后保留浏览器滚动位置 - php
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