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

最新推荐文章于 2022-01-19 19:53:48 发布

aoxianang5500

最新推荐文章于 2022-01-19 19:53:48 发布

阅读量476

点赞数

文章标签： php 前端 javascript ViewUI

原文链接：http://www.cnblogs.com/Johnfx-home/archive/2012/12/27/2835824.html

版权

开发语言：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 <body>
 2     <form id="form1" runat="server">
 3     <div>
 4         昵称：<asp:TextBox ID="tBox_nicheng" runat="server" οnblur="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" οnblur="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" οnblur="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" οnblur="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" οnblur="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" οnblur="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" οnblur="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}$

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

aoxianang5500

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用正则表达式对用户的输入进行前台验证和后台验证

开发语言：ASP.NET ，控件都是使用的服务器控件，因为后台要调用这些值效果实现：一个注册页面，想要达到的一种效果就是，当用户在一个TextBox里面输入完成之后，随即就对他输入的这个值进行正则验证，对不符合的输入显示出提示。还要看一个的就是TextBox的onblur事件,这个虽然是在HTML中的，但是在服务器控件中也是可以使用的。1 ...
复制链接

扫一扫