使用正则表达式实现注册表单验证（包括下拉列表二级联动、密码显示和隐藏）...
2024-05-08 01:21:29
根据所学知识和查找网上资料所写，有错误或不足之处欢迎指正。
实现的效果如下图（网络图片）所示：
开始写代码
注册html页面——先简单的利用table标签和input标签写出来（上面的图片用PS制作）。
1 <form method="post" action="regisucc.html" onsubmit="return checkAll();"> 2 <div class="head"><img src="data:image/img_1.png" /></div> 3 <div class="foot"> 4 <table> 5 <tr> 6 <td class="left"><span id="DLMtip"></span>登录名：</td> 7 <td class="center"><input type="text" name="lname" id="lname" onblur="checkLname()" /></td> 8 <td class="right"><span id="lnamespan" class="spa" ></span></td> 9 </tr> 10 <tr> 11 <td class="left"><span id="XMtip"></span>姓名：</td> 12 <td class="center"><input type="text" name="name" id="name" onblur="checkName()" /></td> 13 <td class="right"><span id="namespan" class="spa" ></span></td> 14 </tr> 15 <tr> 16 <td class="left"><span id="SFZtip"></span>身份证号：</td> 17 <td class="center"><input type="text" name="number" id="number" onblur="checkNumber()" /></td> 18 <td class="right"><span id="numberspan" class="spa"></span></td> 19 </tr> 20 <tr> 21 <td class="left"><span id="SJHtip"></span>手机号：</td> 22 <td class="center"><input type="text" name="phone" id="phone" onblur="checkPhone()" /></td> 23 <td class="right"><span id="phonespan" class="spa"></span></td> 24 </tr> 25 <tr> 26 <td class="left"><span id="YHFLtip"></span>用户分类：</td> 27 <td class="center"> 28 <select name="type" id="type" onblur="checkType()"> 29 <option value="0"></option> 30 <option value="普通用户" style="display: none">普通用户</option> 31 <option value="会员">会员</option> 32 </select> 33 </td> 34 <td class="right"><span id="typespan" class="spa"></span></td> 35 </tr> 36 <tr> 37 <td class="left"><span id="QXtip"></span>区县：</td> 38 <td class="center"> 39 <select name="county" id="county" onchange="change(this.value)" onblur="checkCounty()"> 40 <option value="0" style="display: none"></option> 41 <option value="1">贵池区</option> 42 <option value="2">青阳县</option> 43 <option value="3">东至县</option> 44 <option value="4">石台县</option> 45 </select> 46 </td> 47 <td class="right"><span id="countyspan" class="spa"></span></td> 48 </tr> 49 <tr> 50 <td class="left"><span id="JDXZtip"></span>街道/乡镇：</td> 51 <td class="center"> 52 <select id="town" name="town" onblur="checkTown()"> 53 <option value="0"></option> 54 </select> 55 </td> 56 <td class="right"><span id="townspan" class="spa"></span></td> 57 </tr> 58 <tr> 59 <td class="left"><span id="MMtip"></span>密码：</td> 60 <td class="center"> 61 <input type="password" id="pwd" name="pwd" onblur="checkPwd()" /> 62 <img class="demo_img" id="demo_img" onclick="hideShowPwd()" src="data:image/visible.png" /> 63 </td> 64 <td class="right"><span id="pwdspan" class="spa" ></span></td> 65 </tr> 66 <tr> 67 <td class="left"><span id="QRMMtip"></span>确认密码：</td> 68 <td class="center"> 69 <input type="password" id="repwd" name="repwd" onblur="checkRepwd()" /> 70 <img class="demo_img2" id="demo_img2" onclick="hideShowRepwd()" src="data:image/visible.png" /> 71 </td> 72 <td class="right"><span id="repwdspan" class="spa"></span></td> 73 </tr> 74 <tr> 75 <td class="left"></td> 76 <td class="center"><input type="submit" class="but" value="提交" /></td> 77 <td class="right"></td> 78 </tr> 79 </table> 80 </div> 81 </form>
然后是js文件
area.js——下拉列表二级联动
1 function change(value)
2 {
3 var arr = new Array();
4 arr[1 ]=new Array("池阳街道","秋浦街道","里山街道","江口街道","梅龙街道","马衙街道","墩上街道","秋江街道","杏花村街道","清风街道","清溪街道","殷汇镇","牛头山镇","涓桥镇","梅街镇","梅村镇","唐田镇","牌楼镇","乌沙镇","棠溪镇");
5 arr[2 ]=new Array("蓉城镇","木镇镇","庙前镇","陵阳镇","新河镇","丁桥镇","朱备镇","杨田镇","九华镇","酉华镇","乔木乡","杜村乡","九华乡");
6 arr[3 ]=new Array("尧渡镇","东流镇","大渡口镇","胜利镇","张溪镇","洋湖镇","葛公镇","香隅镇","官港镇","昭潭镇","龙泉镇","泥溪镇","花园里乡","木塔乡","青山乡");
7 arr[4 ]=new Array("仁里镇","七都镇","仙寓镇","丁香镇","小河镇","横渡镇","大演乡","矶滩乡");
8
9 document.getElementById("town").options.length=0;
10 for(var m =0 ;m<arr[value].length;m++)
11 {
12 var opt=document.createElement("option");
13 var node=document.createTextNode(arr[value][m]+"");
14 opt.appendChild(node);
15 document.getElementById("town").appendChild(opt);
16 }
17 } pwd.js——密码显示与隐藏(点击事件)
两张眼睛图片在网上下载
另 有些浏览器是自带密码显示隐藏功能的，无需此步骤。
1 function hideShowPwd()
2 {
3 var img = document.getElementById("demo_img");
4 var pwd = document.getElementById("pwd");
5
6 if (pwd.type == "password")
7 {
8 pwd.type = "text";
9 img.src = "image/invisible.png";
10 }else
11 {
12 pwd.type = "password";
13 img.src = "image/visible.png";
14 }
15 }
16
17 function hideShowRepwd()
18 {
19 var img = document.getElementById("demo_img2");
20 var pwd = document.getElementById("repwd");
21
22 if (pwd.type == "password")
23 {
24 pwd.type = "text";
25 img.src = "image/invisible.png";
26 }
27 else
28 {
29 pwd.type = "password";
30 img.src = "image/visible.png";
31 }
32 }重点来了，vali.js——用正则表达式验证表单
1 //检验用户名
2 function checkLname()
3 {
4 var lname = document.getElementById("lname").value;
5 var spanNode = document.getElementById("lnamespan");
6 var tip = document.getElementById("DLMtip");
7 var reg = /^[\u4E00-\u9FA5|A-Za-z]([a-zA-Z0-9_\u4e00-\u9fa5]){3,20}$/; //^'和'$' 作用是分别指出一个字符串的开始和结束。
8
9 if(reg.test(lname))
10 {
11 tip.innerHTML = ""; //向对象插入""里的内容
12 spanNode.innerHTML = "正确".fontcolor("green");
13 return true;
14 }
15 else
16 {
17 tip.innerHTML = "*".fontcolor("red");
18 spanNode.innerHTML = "3-20位，中文、字母、数字、下划线的组合，以中文或字母开头";
19 return false;
20 }
21 }
22
23 //检验姓名
24 function checkName()
25 {
26 var name = document.getElementById("name").value;
27 var spanNode = document.getElementById("namespan");
28 var tip = document.getElementById("XMtip");
29 var reg = /^[\u4e00-\u9fa5]{2,4}$/;
30
31 if(reg.test(name))
32 {
33 tip.innerHTML = "";
34 spanNode.innerHTML = "正确".fontcolor("green");
35 return true;
36 }
37 else
38 {
39 tip.innerHTML = "*".fontcolor("red");
40 spanNode.innerHTML = "请填写姓名";
41 return false;
42 }
43 }
44
45
46 //检验身份证号
47 function checkNumber()
48 {
49 var number = document.getElementById("number").value;
50 var spanNode = document.getElementById("numberspan");
51 var tip = document.getElementById("SFZtip");
52 var reg =/^\d{17}X$|^\d{18}$/;
53
54 if(reg.test(number))
55 {
56 tip.innerHTML = "";
57 spanNode.innerHTML = "正确".fontcolor("green");
58 return true;
59 }
60 else
61 {
62 tip.innerHTML = "*".fontcolor("red");
63 spanNode.innerHTML = "请填写身份证号";
64 return false;
65 }
66 }
67
68
69 //检验手机号
70 function checkPhone()
71 {
72 var phone = document.getElementById("phone").value;
73 var spanNode = document.getElementById("phonespan");
74 var tip = document.getElementById("SJHtip");
75 var reg = /^1[34578][0-9]{9}$/;
76
77 if(reg.test(phone))
78 {
79 tip.innerHTML = "";
80 spanNode.innerHTML = "正确".fontcolor("green");
81 return true;
82 }
83 else
84 {
85 tip.innerHTML = "*".fontcolor("red");
86 spanNode.innerHTML = "请填写11位有效的手机号码";
87 return false;
88 }
89 }
90
91
92 //检验用户分类
93 function checkType()
94 {
95 var type= document.getElementById("type").value;
96 var spanNode = document.getElementById("typespan");
97 var tip = document.getElementById("YHFLtip");
98
99 if(type!="0")
100 {
101 tip.innerHTML = "";
102 spanNode.innerHTML = "正确".fontcolor("green");
103 return true;
104 }
105 else
106 {
107 tip.innerHTML = "*".fontcolor("red");
108 spanNode.innerHTML = "请填选择身份类型";
109 return false;
110 }
111 }
112
113 //检验区县
114 function checkCounty()
115 {
116 var county = document.getElementById("county").value;
117 var spanNode = document.getElementById("countyspan");
118 var tip = document.getElementById("QXtip");
119
120 if(county!="0")
121 {
122 tip.innerHTML = "";
123 spanNode.innerHTML = "正确".fontcolor("green");
124 return true;
125 }
126 else
127 {
128 tip.innerHTML = "*".fontcolor("red");
129 spanNode.innerHTML = "请填选择区县";
130 return false;
131 }
132 }
133
134 //检验街道乡镇
135 function checkTown()
136 {
137 var town = document.getElementById("town").value;
138 var spanNode = document.getElementById("townspan");
139 var tip = document.getElementById("JDXZtip");
140
141 if(town!="0")
142 {
143 tip.innerHTML = "";
144 spanNode.innerHTML = "正确".fontcolor("green");
145 return true;
146 }
147 else
148 {
149 tip.innerHTML = "*".fontcolor("red");
150 spanNode.innerHTML = "请填选择街道/乡镇";
151 return false;
152 }
153 }
154
155 //检验密码
156 function checkPwd()
157 {
158 var pwd = document.getElementById("pwd").value;
159 var spanNode = document.getElementById("pwdspan");
160 var tip = document.getElementById("MMtip");
161 var reg = /^[\s\S]{6,20}$/; // \s:[a-zA-Z0-9] ; \S 取反：非空白字符
162
163 if(reg.test(pwd))
164 {
165 tip.innerHTML = "";
166 spanNode.innerHTML = "正确".fontcolor("green");
167 return true;
168 }
169 else
170 {
171 tip.innerHTML = "*".fontcolor("red");
172 spanNode.innerHTML = "6-20位英文(区分大小写)、数字、字符的组合";
173 return false;
174 }
175 }
176
177 //检验确认密码
178 function checkRepwd()
179 {
180 var pwd = document.getElementById("pwd").value;
181 var repwd = document.getElementById("repwd").value;
182 var spanNode = document.getElementById("repwdspan");
183 var tip = document.getElementById("QRMMtip");
184 var reg = /^[\s\S]{6,20}$/;
185
186 if(reg.test(repwd))
187 {
188 if(pwd==repwd)
189 {
190 tip.innerHTML = "";
191 spanNode.innerHTML = "正确".fontcolor("green");
192 return true;
193 }
194 else
195 {
196 tip.innerHTML = "*".fontcolor("red");
197 spanNode.innerHTML = "请再输入一遍上面的密码";
198 return false;
199 }
200 }
201 else
202 {
203 tip.innerHTML = "*".fontcolor("red");
204 spanNode.innerHTML = "请再输入一遍上面的密码";
205 return false;
206 }
207 }
208
209 //全部验证成功再提交表单
210 function checkAll()
211 {
212 var lname=checkLname();
213 var name=checkName();
214 var number=checkNumber();
215 var phone=checkPhone();
216 var type=checkType();
217 var county=checkCounty();
218 var town = checkTown();
219 var pwd = checkPwd();
220 var repwd= checkRepwd();
221
222 if(lname&&name&&number&&phone&&type&&county&&town&&pwd&&repwd)
223 {
224 return true;
225 }
226 else
227 {
228 return false;
229 }
230 }css根据自己的喜好写就行了。
补一个注册成功的界面
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>注册成功</title> 6 <link rel="stylesheet" href="css/common.css" type="text/css"/> 7 <link rel="stylesheet" href="css/regisucc.css" type="text/css"/> 8 </head> 9 <body> 10 <div class="head"><img src="data:image/img_2.png" /></div> 11 <div class="foot1"> 12 <p>恭喜你！注册成功</p> 13 <a href="register.html">返回注册页面</a> 14 </div> 15 </body> 16 </html>
出来的默认效果就是这样
填写信息为空或错误时
填写的信息符合正则表达式后
全部正确点击提交按钮进入注册成功页面
转载于:https://www.cnblogs.com/guozhihua/p/10282691.html
使用正则表达式实现注册表单验证（包括下拉列表二级联动、密码显示和隐藏）...相关推荐
- JavaScript使用正则表达式进行邮箱表单验证实例
*******JavaScript使用正则表达式进行邮箱表单验证实例************ 1.在JavaScript中也可以使用正则表达式对表单输入的数据进行验证格式如下 /正则表达式/.test ...
- 购物车的制作 与注册表单验证
购物车的制作 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- JavaWeb前端开发注册表单验证
注册表单验证 最近在尝试学习开发一个网站,现将登录页面的表单验证总结如下 表单校验分析 1.用户名:单词字符,8到20位 2.密码:单词字符,8到20位 3.email:邮箱格式 4.姓名:汉字非空 ...
- java注册登录小程序,详解小程序之简单登录注册表单验证
这段时间在做员工管理的小程序,前期在登录注册上花了不少功夫,今天就给大家分享下. 效果图,wxss的内容较简单,自己编写即可. ##主要内容 一.首先我是在util.js中引入表单正则验证规则,给予l ...
- jQuery表单验证实例 / 包含用户名、密码、住址、邮箱验证
jQuery表单验证实例 / 包含用户名.密码.住址.邮箱验证 如下图 别忘了引入jQuery框架!!! 话不多说直接先上jQuery部分代码: <script type="text/ ...
- javascript:正则表达式、一个表单验证的例子
阅读目录 本文内容: 正则表达式: 利用正则表达式进行表单验证的例子: 回到顶部 本文内容: 正则表达式 正则表达式的使用方法 正则表达式的特殊匹配字符 正则表达式修饰符 利用正则表达式进行表单验证的 ...
- 小程序之简单登录注册表单验证
这段时间在做员工管理的小程序,前期在登录注册上花了不少功夫,今天就给大家分享下. 效果图,wxss的内容较简单,自己编写即可. ##主要内容 一.首先我是在util.js中引入表单正则验证规则,给予l ...
- 表单验证[用户名、邮箱、密码、重复密码]
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- BOS项目(SSH)04_02_修改密码功能-easyui的表单验证、表单检验 easyUI实现表单验证、如果加密的密码忘记了怎么办
系列文章目录 文章目录 系列文章目录 前言 修改密码功能-easyui的表单检验 如果加密的密码忘记了怎么办 总结 前言 这些是easyUI帮我们做好的,我们只需要在easyUI里面声明好一些属性即可 ...
最新文章
- 谷歌浏览器 chrome 查看当前页面cookie
- 让隔壁同事哇塞的IDEA主题！
- 飞思卡尔高级驾驶员辅助系统(ADAS)解决方案
- 手持gps坐标转换参数求解方法及在excel中的实现_分享∣Arcgis中62个常用技巧系列二（21-40技巧）...
- Python函数的动态参数
- J2EE中在web.xml异常页面跳转
- Dom4j完整教程~Document对象相关
- 四、华为鸿蒙HarmonyOS应用开发之Java开发下Page Ability生命周期
- Python办公自动化 - 4 PDF办公自动化
- windows下Tomcat安装及Eclipse配置教程
- SQL不能以实例名连接问题处理
- Qt——多语言程序设计
- 14个最常用的app测试工具推荐，拿走不谢！
- Hive中4个By Sort By 、Order By、Distrbute By、 Cluster By区别
- 再见，2020。您好，2021！
- 百度AI攻略：手写文字识别
- 基于Java毕业设计阳光社区新冠瘦苗接种系统源码+系统+mysql+lw文档+部署软件
- 只能输入零和非零开头的数字的正则表达式
- js微信抢红包脚本代码_微信红包算法(js)
- 产业互联网下半场，SaaS平台的机遇与挑战