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

开发语言：ASP.NET ，控件都是使用的服务器控件，因为后台要调用这些值

效果实现：

          一个注册页面，想要达到的一种效果就是，当用户在一个TextBox里面输入完成之后，随即就对他输入的这个值进行正则验证，对不符合的输入显示出提示。

还要看一个的就是

TextBox的onblur事件,这个虽然是在HTML中的，但是在服务器控件中也是可以使用的。

1 onblur 事件会在对象失去焦点时发生
2 
3 语法
4 οnblur="SomeJavaScriptCode"
5 
6 参数    SomeJavaScriptCode
7 描述     必需。规定该事件发生时执行的 JavaScript。 

 

而与之对应的，就是onFocus

1 onfocus 事件在对象获得焦点时发生
2 
3 语法
4 οnfοcus="SomeJavaScriptCode"
5 
6 参数   SomeJavaScriptCode  
7 描述   必需。规定该事件发生时执行的 JavaScript。 

 

废话不多说，就动手开始做吧。

 

这样的验证可以使用前台在javascript 里面验证，也可以使用后台代码验证。

我先做前台的。

 

首先，我们设计前台界面

 1 
 2     
"form1" runat="server">
 3     

 4         昵称："tBox_nicheng" runat="server" οnblur="InputValid_onclick(this.value,regExpZiMu_valid,'Label1','Label2')">
 5         "Label1" runat="server" Style="display: " Text="昵称的格式为字母，数字，和下划线组成"
 6             Font-Size="Small" ForeColor="#D5D5D5">
 7         "Label2" runat="server" Style="display: none" Text="您的昵称输入有误" Font-Size="Small"
 8             ForeColor="Red">

 9         真实姓名："tBox_realName" runat="server" οnblur="InputValid(this.value,regExpHanzi_valid,'Label3')">
10         "Label3" runat="server" Style="display: none" Text="姓名格式有误" Font-Size="Small"
11             ForeColor="Red">
12         

13         邮箱："tBox_mail" runat="server" οnblur="InputValid(this.value,regExpMail_valid,'Label4')">
14         "Label4" runat="server" Style="display: none" Text="邮箱格式有误" Font-Size="Small"
15             ForeColor="Red">
16         

17         密码："tBox_pwd" runat="server" οnblur="InputValid(this.value,regExpZiMu_valid,'Label5')">
18         "Label5" runat="server" Style="display: none" Text="密码的格式输入有误" Font-Size="Small"
19             ForeColor="Red">
20         

21         电话号码："tBox_Phone" runat="server" οnblur="InputValid(this.value,regExpPhone_valid,'Label6')">
22         "Label6" runat="server" Style="display: none" Text="电话号码的格式输入有误" Font-Size="Small"
23             ForeColor="Red">
24         

25         身份证号码："tBox_PID" runat="server" οnblur="InputValid(this.value,regExpPID_valid,'Label7')">
26         "Label7" runat="server" Style="display: none" Text="身份证号码的格式输入有误" Font-Size="Small"
27             ForeColor="Red">
28         

29         邮政编码："TextBox3" runat="server" οnblur="InputValid(this.value,regExpYouBian_valid,'Label8')">
30         "Label8" runat="server" Style="display: none" Text="邮编的格式输入有误" Font-Size="Small"
31             ForeColor="Red">
32     
33     
34 

接下来，就是写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}$

 

 

转载于:https://www.cnblogs.com/Johnfx-home/archive/2012/12/27/2835824.html