使用正则表达式对用户的输入进行前台验证和后台验证
开发语言:ASP.NET ,控件都是使用的服务器控件,因为后台要调用这些值
效果实现:
一个注册页面,想要达到的一种效果就是,当用户在一个TextBox里面输入完成之后,随即就对他输入的这个值进行正则验证,对不符合的输入显示出提示。
还要看一个的就是
TextBox的onblur事件,这个虽然是在HTML中的,但是在服务器控件中也是可以使用的。
1 onblur 事件会在对象失去焦点时发生 2 3 语法 4 onblur="SomeJavaScriptCode" 5 6 参数 SomeJavaScriptCode 7 描述 必需。规定该事件发生时执行的 JavaScript。
而与之对应的,就是onFocus
1 onfocus 事件在对象获得焦点时发生 2 3 语法 4 onfocus="SomeJavaScriptCode" 5 6 参数 SomeJavaScriptCode 7 描述 必需。规定该事件发生时执行的 JavaScript。
废话不多说,就动手开始做吧。
这样的验证可以使用前台在javascript 里面验证,也可以使用后台代码验证。
我先做前台的。
首先,我们设计前台界面
1 <body> 2 <form id="form1" runat="server"> 3 <div> 4 昵称:<asp:TextBox ID="tBox_nicheng" runat="server" onblur="InputValid_onclick(this.value,regExpZiMu_valid,'Label1','Label2')"></asp:TextBox> 5 <asp:Label ID="Label1" runat="server" Style="display: " Text="昵称的格式为字母,数字,和下划线组成" 6 Font-Size="Small" ForeColor="#D5D5D5"></asp:Label> 7 <asp:Label ID="Label2" runat="server" Style="display: none" Text="您的昵称输入有误" Font-Size="Small" 8 ForeColor="Red"></asp:Label><br /> 9 真实姓名:<asp:TextBox ID="tBox_realName" runat="server" onblur="InputValid(this.value,regExpHanzi_valid,'Label3')"></asp:TextBox> 10 <asp:Label ID="Label3" runat="server" Style="display: none" Text="姓名格式有误" Font-Size="Small" 11 ForeColor="Red"></asp:Label> 12 <br /> 13 邮箱:<asp:TextBox ID="tBox_mail" runat="server" onblur="InputValid(this.value,regExpMail_valid,'Label4')"></asp:TextBox> 14 <asp:Label ID="Label4" runat="server" Style="display: none" Text="邮箱格式有误" Font-Size="Small" 15 ForeColor="Red"></asp:Label> 16 <br /> 17 密码:<asp:TextBox ID="tBox_pwd" runat="server" onblur="InputValid(this.value,regExpZiMu_valid,'Label5')"></asp:TextBox> 18 <asp:Label ID="Label5" runat="server" Style="display: none" Text="密码的格式输入有误" Font-Size="Small" 19 ForeColor="Red"></asp:Label> 20 <br /> 21 电话号码:<asp:TextBox ID="tBox_Phone" runat="server" onblur="InputValid(this.value,regExpPhone_valid,'Label6')"></asp:TextBox> 22 <asp:Label ID="Label6" runat="server" Style="display: none" Text="电话号码的格式输入有误" Font-Size="Small" 23 ForeColor="Red"></asp:Label> 24 <br /> 25 身份证号码:<asp:TextBox ID="tBox_PID" runat="server" onblur="InputValid(this.value,regExpPID_valid,'Label7')"></asp:TextBox> 26 <asp:Label ID="Label7" runat="server" Style="display: none" Text="身份证号码的格式输入有误" Font-Size="Small" 27 ForeColor="Red"></asp:Label> 28 <br /> 29 邮政编码:<asp:TextBox ID="TextBox3" runat="server" onblur="InputValid(this.value,regExpYouBian_valid,'Label8')"></asp:TextBox> 30 <asp:Label ID="Label8" runat="server" Style="display: none" Text="邮编的格式输入有误" Font-Size="Small" 31 ForeColor="Red"></asp:Label> 32 </div> 33 </form> 34 </body>
接下来,就是写JS文件了,来看看
View Code
1 /// 2 ///这个文件是在前台用正则表达式验证用户的输入的方法 3 /// 4 5 6 7 8 //验证用户输入的是否是字母、数字、或者下划线 9 function regExpZiMu_valid(text) { 10 var myRegExp = /^[A-Za-z0-9_]+$/i; 11 return (myRegExp.test(text)); 12 } 13 14 //验证用户输入的是否是 汉字 15 function regExpHanzi_valid(text) { 16 var myRegExp = /^[\u4e00-\u9fa5]{1,20}$/i; 17 return (myRegExp.test(text)); 18 } 19 20 //邮箱验证 21 function regExpMail_valid(text) { 22 var myRegExp = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/i; 23 return (myRegExp.test(text)); 24 } 25 26 27 //验证电话号码 28 function regExpPhone_valid(text) { 29 var myRegExp = /(\(\d{3}\)|\d{3}-)?\d{8}/i; 30 return (myRegExp.test(text)); 31 } 32 33 34 //验证身份证号码 35 function regExpPID_valid(text) { 36 var myRegExp = /\d{17}[\d|X]|\d{15}/i; 37 return (myRegExp.test(text)); 38 } 39 40 41 //验证邮政编码 42 function regExpYouBian_valid(text) { 43 var myRegExp = /\d{6}/i; 44 return (myRegExp.test(text)); 45 } 46 47 48 49 50 //将标签隐藏起来 51 function hideElement(id) { 52 document.getElementById(id).style.display = "none"; 53 } 54 55 //将标签显现出来 56 function showElement(id) { 57 document.getElementById(id).style.display = ""; 58 } 59 60 61 62 63 64 65 function InputValid(test, func, label) { //参数:用户的输入,正则方法名,标签的ID 66 if (test == null || test == "") { 67 hideElement(label); 68 } 69 else { 70 if (func(test) == true) { 71 hideElement(label); 72 73 } 74 else { 75 showElement(label); 76 } 77 } 78 } 79 80 81 82 83 84 function InputValid_onclick(test, func, label1, label2) {//参数:用户的输入,正则方法名,标签的ID,原来隐藏的标签ID 85 if (test == null || test == "") { 86 showElement(label1); 87 hideElement(label2); 88 } 89 else { 90 if (func(test) == true) { 91 hideElement(label1); 92 hideElement(label2); 93 } 94 else { 95 hideElement(label1); 96 showElement(label2); 97 } 98 } 99 }
并且,在前台界面中引用,就可以了。
下面我们来看看后台的验证方法
Regex.IsMatch(text,@"^[\u4e00-\u9fa5]{1,20}$");
第一个参数是用户的输入,第二个参数是正则表达式的表示,这样子就可以对用户的输入进行验证了。
//////////////////////////////////////////////////
Internet URL : http(s)?://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?
Internet Mail : \w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*
中华人民国电话号码: (\(\d{3}\)|\d{3}-)?\d{8}
身份证号: \d{17}[\d|X]|\d{15}
邮政编码: \d{6}
字母,数字,和下划线,或者是组合: ^[A-Za-z0-9_]+$
汉字验证: ^[\u4e00-\u9fa5]{1,20}$