使用正则表达式对用户的输入进行前台验证和后台验证

开发语言: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}$

 

posted @ 2012-12-27 15:45  殇琉璃  阅读(1242)  评论(0编辑  收藏  举报