最近在做一个比较大型的电子商务网站，项目组内一直没人去把通用脚本验证封装出来，每个组员都是在开发页面时自己写脚本验证，这样搞不光开发效率低而且维护性极差，解决方式就是需要封装出通用的脚本验证组件，传统的组件都是很丑的，这里介绍一种既实用又漂亮的组件FieldVerify，先看一下效果图：
看完效果图之后，我们可以讲一下这一块的思路了，传统模式（很多项目都在用的模式）都是自己写js验证代码，在鼠标定位到输入框时捕获onfocus事件，在这个事件里加入友好提示，例如“请输入用户信息！”，鼠标移出输入框时捕获失去焦点事件onblur,在这个事件里对此控件进行脚本验证，像判空、长度、格式等等，这种模式的缺点是：每个页面都要自己的验证js代码，验证方式五花八门，每个页面输出给客户的也是不一致的效果，可维护性、扩展性极差，而且每个人水平都一样，容易产生大量bug；通用模式就是为了解决这一点，为了增强代码的可维护性、可扩展性，项目小组调用的都是统一的脚本验证组件，反馈给客户的界面也是一致的，具体怎么做呢？其实开发思路和模式1是差不多的，只不过是把被验证控件的一些通用的方法、代码、样式等抽取出来了，事件还是那两个，只不过调用这两个事件的js方法是通用的，通过传递不同的参数来去封装，还是把代码贴出来吧，没有代码的描述都是空洞的，JS文件代码如下：
/* * 功能：Web 2.0通用脚本验证，友好人机交互界面，参考demo页 * 作者：李蒙强
* 日期：2012.07.08 */ function GetElement(i) { return document.getElementById(i) } function killErrors() { return true; } window.onerror = killErrors; function parsestr(str) { if (isNaN(parseFloat(str))) return str; else return parseFloat(str); } // 输出正确或错误提示 function addspan(Obj, msg) { var color; if (msg == "ok") { color = "green"; SetResult("right", "", "dv" + Obj.id, Obj.id, "dr" + Obj.id); } else color = "red"; if (GetElement("E_" + Obj.name)) { if (msg != "ok") { SetResult("error", msg, "dv" + Obj.id, Obj.id, "dr" + Obj.id); } } else { if (msg != "ok") { SetResult("error", msg, "dv" + Obj.id, Obj.id, "dr" + Obj.id); } } } // 验证控件输入 function CkValidate(Obj) { var msg = ""; var msg1 = ""; Obj = GetElement(Obj.name); var t = Obj.v_title.split('~|~'); if (t.length > 3) { switch (t[3]) { case "hlg": if (GetValue(Obj).length < t[4] || GetValue(Obj).length > t[5]) msg = "输入字符数应在" + t[4] + "--" + t[5] + "之间"; break; case "mxn": if (parsestr(GetValue(Obj)) < t[4] || parsestr(GetValue(Obj)) > t[5]) msg = "输入数值应在" + t[4] + "--" + t[5] + "之间"; break; case "rep": if (GetValue(Obj) != GetValue(GetElement(t[4]))) msg = "两次输入密码不一至"; msg1 = msg; break; } } if (t.length > 2) { if (!RegExp(t[2], "i").test(String(GetValue(Obj)))) msg = t[1]; } if (t.length > 0) { if (!/.+/.test(GetValue(Obj)) && t[0] == "必填") msg = "不能为空！"; if (!/.+/.test(GetValue(Obj)) && t[0] == "选填") msg = ""; } if (GetElement(t[4])) if (msg) { addspan(Obj, msg); addspan(GetElement(t[4]), msg1); } else { addspan(Obj, "ok"); addspan(GetElement(t[4]), "ok"); } else if (msg) { addspan(Obj, msg); } else { addspan(Obj, "ok"); } return msg; } function GetValue(el) { var sType = el.type; switch (sType) { case "text": case "hidden": case "password": case "file": case "textarea": return el.value; case "checkbox": case "radio": return GetValueChoose(el); case "select-one": case "select-multiple": return GetValueSel(el); } function GetValueChoose(el) { var sValue = ""; var tmpels = document.getElementsByName(el.name); for (var i = 0; i < tmpels.length; i++) { if (tmpels[i].checked) { sValue += "0"; } } return sValue; } function GetValueSel(el) { var sValue = ""; for (var i = 0; i < el.options.length; i++) { if (el.options[i].selected && el.options[i].value != "") { sValue += "0"; } } return sValue; } } // 验证整个表单输入域合法性 function CheckForm(oForm) { var els = oForm.elements; var msg = ""; for (var i = 0; i < els.length; i++) { if (els[i].v_title) { msg = Ck(els[i]); if (msg) { break; } } } if (!msg) oForm.submit(); } //检测用户名是否合法 function CheckUserName(userName, divId, controlId, rowId) { userName = removeAllSpace(userName); if (userName.toString().length > 0) { $.ajax({ type: 'POST', url: '/Controls/Register/CS/QueryAjax.ashx', data: 'name=Register.Simple.ascx&userName=' + escape(userName), cache: false, complete: function(msg, textStatus) { var data = msg.responseText.split("|"); if (data[0] == "true") { SetResult("right", data[1], divId, controlId, rowId); } else { SetResult("error", data[1], divId, controlId, rowId); } } }); } else { SetResult("error", "用户名不能为空", divId, controlId, rowId); } } //检测Email是否合法 function CheckEmail(email, divId, controlId, rowId) { email = removeAllSpace(email); if (email.toString().length > 0) { $.ajax({ type: 'POST', url: '/We7Controls/Register/CS/QueryAjax.ashx', data: 'name=Register.Simple.ascx&email=' + escape(email), cache: false, complete: function(msg, textStatus) { var data = msg.responseText.split("|"); if (data[0] == "true") { SetResult("right", data[1], divId, controlId, rowId); } else { SetResult("error", data[1], divId, controlId, rowId); } } }); } else { SetResult("error", "电子邮箱不能为空", divId, controlId, rowId); } } //检测密码是否合法 function CheckPWD(pwd, divId, controlId, rowId) { pwd = removeAllSpace(pwd); var data = ""; if (!(pwd.toString().length >= 6 && pwd.toString().length <= 16)) { data = "密码必须在6-16个字符内"; SetResult("error", data, divId, controlId, rowId); } else { SetResult("right", "", divId, controlId, rowId); } } //检测确认密码是否合法 function CheckRePWD(pwdID, rePwd, divId, controlId, rowId) { var pwd = removeAllSpace($("#" + pwdID).val()); rePwd = removeAllSpace(rePwd); var data = ""; if (pwd != rePwd) { data = "密码不匹配"; SetResult("error", data, divId, controlId, rowId); } else { SetResult("right", "", divId, controlId, rowId); } } //处理结果 function SetResult(type, text, divId, controlId, rowId) { var result = ""; if (type == "error") { InitStyle(divId, controlId, rowId); result = "<table width='100%' style='line-height:19px;' align='left'><tr><td width='20px' valign='top' align='left'><img src='images/error.jpg'/></td><td valign='top'>" + text + "</td></tr><table>"; if ($("#" + controlId).val() != "") { $("#" + divId).html(""); $("#" + divId).html(result); $("#" + divId).addClass("error"); $("#" + controlId).addClass("error"); } $("#" + controlId).attr("validate", "false"); } else if (type == "right") { InitStyle(divId, controlId, rowId); result = "<img width='20px' src='images/right.jpg'/>"; //<table width='100%' style='line-height:19px;' align='left'><tr><td width='20px' valign='top' align='left'>图片</td><td valign='top'>" + text + "</td></tr><table> $("#" + divId).html(""); $("#" + divId).html(result); $("#" + divId).addClass("allRight"); $("#" + controlId).attr("validate", "true"); } else if (type == "init") { InitStyle(divId, controlId, rowId); result = "<table width='100%' style='line-height:19px;' align='left'><tr><td width='20px' valign='top' align='left'><img src='images/init.jpg'/></td><td valign='top'>" + text + "</td></tr><table>"; $("#" + divId).html(""); $("#" + divId).html(result); $("#" + divId).addClass("initDiv"); $("#" + rowId).addClass("initRow"); // alert(controlId); // alert($("#" + controlId).attr("class")); } else if (type == "initValidateCode") { $("#" + divId).html(""); $("#" + rowId).addClass("initRow"); } else if (type == "errorValidateCode") { $("#" + rowId).removeClass("initRow"); if ($("#" + controlId).val() != "") { $("#" + divId).html("<img src='images/error.jpg'/>"); } $("#" + controlId).attr("validate", "false"); } else if (type == "rightValidateCode") { $("#" + rowId).removeClass("initRow"); $("#" + divId).html("<img src='images/right.jpg'/>"); $("#" + controlId).attr("validate", "true"); } } //判断最后提交按钮是否可用 function CheckValidate(emailId, userNameId, pwdId, rePwdId, btnId, validateId) { alert($("#" + validateId).attr("validate")); if ($("#" + emailId).attr("validate") == "true" && $("#" + userNameId).attr("validate") == "true" && $("#" + pwdId).attr("validate") == "true" && $("#" + rePwdId).attr("validate") == "true" && $("#" + validateId).attr("validate") == "true") { $("#" + btnId).removeAttr('disabled'); } else { $("#" + btnId).attr("disabled", 'disabled'); } } //出现该项目的填写帮助 function InitControlHelp(text, divId, controlId, rowId) { SetResult("init", text, divId, controlId, rowId); } //去除该项目的填写帮助 function InitStyle(divId, controlId, rowId) { var initText = ""; $("#" + divId).html(initText); $("#" + divId).removeClass("initDiv"); $("#" + rowId).removeClass("initRow"); $("#" + divId).removeClass("error"); $("#" + controlId).removeClass("error"); $("#" + divId).removeClass("allRight"); $("#" + controlId).removeClass("allRight"); } ///去除所有空格 function removeAllSpace(str) { return str.replace(/\s+/g, ""); } //检测验证码是否正确 function CheckValidateCode(validateCode, divId, controlId, rowId) { $.ajax({ type: 'POST', url: '/Controls/Register/CS/QueryAjax.ashx', data: 'name=Register.Simple.ascx&validateCode=' + escape(validateCode), cache: false, complete: function(msg, textStatus) { var data = msg.responseText; if (data == "true") { SetResult("rightValidateCode", "", divId, controlId, rowId); } else { SetResult("errorValidateCode", "", divId, controlId, rowId); } } }); }
这个js主要是对控件的一些通用逻辑进行了封装，主要的两个方法是：InitControlHelp(text, divId, controlId, rowId) 这个主要是onfucs的调用；CkValidate(obj)这个主要是对控件的验证，具体的脚本逻辑这里不再赘述。接下来是我们的前台界面Demo调用页面了，代码如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FV_Demo.aspx.cs" Inherits="BSTest.FieldVarify.FV_Demo" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>通用脚本验证Demo页面</title> <script src="jquery-1.4.2.js" type="text/javascript"></script> <script src="FieldVerify.js" type="text/javascript"></script> <link rel="Stylesheet" href="FieldVerify.css" /> </head> <body> <form id="form1" runat="server" method="get" action="FieldVerify.aspx"> <div style="font-size: 12px" class="Register_Simple_common"> <div class="reg-form"> <table> <tr style="height: 40px" id="trName"> <td> 真实姓名： </td> <td> <input onblur='CkValidate(this)' onfocus="InitControlHelp('请输入姓名。','dvName',this.id,'trName');" name="Name" id="Name" v_title="必填~|~只允许中文且长度在2到5个字符~|~^[\u0391-\uFFE5]+$~|~hlg~|~2~|~5" /><span id="E_Name" style='color: red'>*</span> </td> <td align="left"> <div style="text-align: left" id="dvName" class="disPlayStyle"> </div> </td> </tr> <tr style="height: 40px" id="trNick"> <td> 英文名： </td> <td> <input onblur='CkValidate(this)' onfocus="InitControlHelp('请输入英文名。','dvNick',this.id,'trNick');" name="Nick" id="Nick" v_title="必填~|~只允许英文字母且长度在4到20个字符~|~^[A-Za-z]+$~|~hlg~|~4~|~20"><span id="E_Nick" style='color: red'>*</span> </td> <td align="left"> <div style="text-align: left" id="dvNick" class="disPlayStyle"> </div> </td> </tr> <tr style="height: 40px" id="trHomepage"> <td> 主页： </td> <td> <input onblur='CkValidate(this)' onfocus="InitControlHelp('请输入正确的主页。','dvHomepage',this.id,'trHomepage');" name="Homepage" id="Homepage" v_title="选填~|~非法的Url~|~^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>])*$"> </td> <td align="left"> <div style="text-align: left" id="dvHomepage" class="disPlayStyle"> </div> </td> </tr> <tr style="height: 40px" id="trPassword"> <td> 密码： </td> <td> <input onblur='CkValidate(this)' onfocus="InitControlHelp('请输入密码。','dvPassword',this.id,'trPassword');" name="Password" id="Password" v_title="必填~|~~|~~|~rep~|~RePassword" type='password' /> </td> <td align="left"> <div style="text-align: left" id="dvPassword" class="disPlayStyle"> </div> </td> </tr> <tr style="height: 40px" id="trRePassword"> <td> 重复密码： </td> <td> <input onblur='CkValidate(this)' onfocus="InitControlHelp('请再次输入密码。','dvRePassword',this.id,'trRePassword');" name="RePassword" id="RePassword" v_title="必填~|~~|~~|~rep~|~Password" type='password'> </td> <td align="left"> <div style="text-align: left" id="dvRePassword" class="disPlayStyle"> </div> </td> </tr> <tr style="height: 40px" id="trEmail"> <td> 电子邮件： </td> <td> <input onblur='CkValidate(this)' onfocus="InitControlHelp('请输入电子邮件。','dvEmail',this.id,'trEmail');" name="Email" id="Email" v_title="选填~|~电子邮件格式不正确~|~^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$" /> </td> <td align="left"> <div style="text-align: left" id="dvEmail" class="disPlayStyle"> </div> </td> </tr> <tr style="height: 40px" id="trage"> <td> 年龄： </td> <td> <input onblur='CkValidate(this)' onfocus="InitControlHelp('年龄必需为数字，请输入正确的年龄。','dvage',this.id,'trage');" name="age" id="age" v_title="必填~|~年龄必需为数字!~|~^\d+$~|~mxn~|~16~|~99" /> </td> <td align="left"> <div style="text-align: left" id="dvage" class="disPlayStyle"> </div> </td> </tr> <tr style="height: 40px" id="trDesc"> <td> 自我介绍： </td> <td> <textarea onblur='CkValidate(this)' onfocus="InitControlHelp('请输入备注信息，字符数应在10--500之间！','dvDesc',this.id,'trDesc');" name="Desc" id="Desc" v_title="必填~|~输入字符数应在10--500之间~|~~|~hlg~|~10~|~500"></textarea> </td> <td align="left"> <div style="text-align: left" id="dvDesc" class="disPlayStyle"> </div> </td> </tr> <tr> <td colspan="2"> <input type="button" name="Submit" value="确定" onclick="javascript:Test();" /> <asp:Button ID="btnOK" runat="server" Text="服务器端控件确定" OnClientClick="return CheckForm(form1)" OnClick="btnOK_Click" /> </td> </tr> </table> </div> </div> </form> </body> </html>
前台界面我们需要注意一下几点：1、<div style="font-size: 12px" class="Register_Simple_common"><div class="reg-form">这两个div必须得有，主要是对样式的控制;2、每个验证的tr的id和div提示的id规范分别是tr+控件id号、dv+控件id号；3、每个控件都要有v_title而且要符合demo页面的规范；4、另外对于服务器端确定按钮的逻辑要加入OnClientClick="return CheckForm(form1)"事件，这样页面就基本搞定了。另外验证效果样式都已经封装为样式文件FieldVerify.css，代码如下：
.flk13 A:link { COLOR: #005aa0 } .flk13 A:visited { COLOR: #005aa0 } A.flk13:link { COLOR: #005aa0 } A.flk13:visited { COLOR: #005aa0 } .title.RetrievePassword_Common_one { TEXT-ALIGN: center; LINE-HEIGHT: 40px; MARGIN-TOP: 30px; WIDTH: 600px } .RetrievePassword_Common_one .reg-form { LINE-HEIGHT: 40px } .Register_Simple_common .regContent { TEXT-ALIGN: center; MARGIN-TOP: 0px; WIDTH: auto; BACKGROUND-REPEAT: repeat-x; FONT-FAMILY: "宋体"; BACKGROUND-POSITION: 50% top; HEIGHT: auto; MARGIN-LEFT: auto; FONT-SIZE: 12px; MARGIN-RIGHT: auto } .Register_Simple_common .label { TEXT-ALIGN: right; WIDTH: 100px; PADDING-RIGHT: 10px } .Register_Simple_common LABEL.error { COLOR: red; MARGIN-LEFT: 5px } .Register_Simple_common INPUT { BORDER-BOTTOM: #dcdcdc 1px solid; BORDER-LEFT: #dcdcdc 1px solid; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; HEIGHT: 20px; FONT-SIZE: 12px; BORDER-TOP: #dcdcdc 1px solid; BORDER-RIGHT: #dcdcdc 1px solid; PADDING-TOP: 0px } .Register_Simple_common .button { PADDING-BOTTOM: 0px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; CURSOR: pointer; PADDING-TOP: 0px } .Register_Simple_common .initRow { BACKGROUND-COLOR: #f5fcfe } .Register_Simple_common .initDiv { BORDER-BOTTOM: #40b3ff 2px solid; BORDER-LEFT: #40b3ff 2px solid; BACKGROUND-COLOR: #e5f5ff; WIDTH: 300px; HEIGHT: 38px; VERTICAL-ALIGN: top; BORDER-TOP: #40b3ff 2px solid; BORDER-RIGHT: #40b3ff 2px solid } .Register_Simple_common .error { BORDER-BOTTOM: #ff8080 2px solid; BORDER-LEFT: #ff8080 2px solid; BACKGROUND-COLOR: #fff2f2; WIDTH: 300px; VERTICAL-ALIGN: top; BORDER-TOP: #ff8080 2px solid; BORDER-RIGHT: #ff8080 2px solid } .Register_Simple_common .allRight { TEXT-ALIGN: left } .Register_Simple_common .flow-steps { MARGIN-TOP: 3px; MARGIN-LEFT: 60px; OVERFLOW: hidden } .Register_Simple_common .flow-steps .num3 OL { LIST-STYLE-TYPE: none } .Register_Simple_common .flow-steps .num3 LI { LIST-STYLE-TYPE: none; WIDTH: 230px } .Register_Simple_common .flow-steps .num4 LI { WIDTH: 222px } .Register_Simple_common .flow-steps .num5 LI { WIDTH: 175px } .Register_Simple_common .flow-steps .num6 LI { WIDTH: 143px } .Register_Simple_common .flow-steps LI { TEXT-ALIGN: center; PADDING-BOTTOM: 0px; LINE-HEIGHT: 23px; PADDING-LEFT: 0px; PADDING-RIGHT: 15px; BACKGROUND: url(/Admin/images/flow_steps_bg.png) #e4e4e4 no-repeat 100% 0px; FLOAT: left; HEIGHT: 23px; COLOR: #404040; FONT-SIZE: 14px; OVERFLOW: hidden; FONT-WEIGHT: bold; PADDING-TOP: 0px } .flow-steps LI SPAN { DISPLAY: block } .flow-steps LI STRONG { DISPLAY: block } .flow-steps LI .first { BACKGROUND: url(/Admin/images/flow_steps_bg.png) #e4e4e4 no-repeat -12px -69px } .Register_Simple_common .flow-steps LI.last { BACKGROUND-POSITION: 100% -138px } .Register_Simple_common .flow-steps LI.current { BACKGROUND-COLOR: #f60; COLOR: #fff } .Register_Simple_common .flow-steps LI.current .first { BACKGROUND-COLOR: #f60; BACKGROUND-POSITION: -12px -92px } .Register_Simple_common .flow-steps LI.current-prev { BACKGROUND-POSITION: 100% -23px } .Register_Simple_common .flow-steps LI.done { BACKGROUND-COLOR: #ffe6ba; BACKGROUND-POSITION: 100% -46px; COLOR: #f60 } .Register_Simple_common .flow-steps LI.done .first { BACKGROUND-COLOR: #ffe6ba; BACKGROUND-POSITION: -12px -115px } .Register_Simple_common .flow-steps LI.last-current { BACKGROUND-COLOR: #f60; BACKGROUND-POSITION: 100% -161px; COLOR: #fff } .Register_Simple_common .reg-email { BORDER-BOTTOM: #94d3fe 1px solid; BORDER-LEFT: #94d3fe 1px solid; PADDING-BOTTOM: 20px; BACKGROUND-COLOR: #f1faff; MARGIN: 30px auto 0px 60px; WIDTH: 735px; BORDER-TOP: #94d3fe 1px solid; BORDER-RIGHT: #94d3fe 1px solid } .Register_Simple_common .reg-form { MARGIN-TOP: 30px; WIDTH: 735px; MARGIN-LEFT: 60px } .Register_Simple_common .reg-form .button { PADDING-BOTTOM: 0px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; CURSOR: pointer; PADDING-TOP: 0px } .Register_Simple_common .table_form { TEXT-ALIGN: left; LINE-HEIGHT: 30px; WIDTH: 735px; FLOAT: left; MARGIN-LEFT: 40px } .Register_Simple_common .formTitle { TEXT-ALIGN: right; WIDTH: 200px; FONT-WEIGHT: bold; MARGIN-RIGHT: 5px } .Register_Simple_common .formValue { TEXT-ALIGN: left; MARGIN-LEFT: 10px; VERTICAL-ALIGN: middle } .Register_Simple_common .button_style { MARGIN-TOP: 10px; WIDTH: 80px; HEIGHT: 30px; VERTICAL-ALIGN: middle; CURSOR: pointer } .Register_Simple_common .disPlayStyle { TEXT-ALIGN: left; FLOAT: left }
总结一下：这个脚本下一步还可以继续完善一下，把它封装为面向对象的脚本会更通用，另外为了方式页面被黑客利用或攻击，开发后台中最好也要对必要控件进行验证，这样双管齐下才是最好的验证！