JavaScript实现表单的校验以及匹配正则表达式
运行效果：
未填写信息报错：
匹配正则表达式：
信息校验无误：
源代码如下：
1 <!DOCTYPE html>
2 <html lang="zh">
3 <head>
4 <meta charset="UTF-8">
5 <title>用户注册</title>
6 <!--<link rel="stylesheet" type="text/css" href="style/index.css"/>-->
7 </head>
8 <style type="text/css">
9 body {
10 margin-top: 20px;
11 }
12
13 .box {
14 font-size: 13px;
15 margin: 0 auto;
16 width: 80%;
17 }
18
19 .box-head {
20 width: 30%;
21 text-align: center;
22 padding: 15px 20px;
23 font-size: 24px;
24 }
25
26 .box-body {
27 padding: 10px 20px;
28 }
29
30 .box-body th {
31 font-weight: normal;
32 vertical-align: top;
33 padding-top: 12px;
34 }
35
36 .box-body tr:last-child {
37 text-align: center;
38 }
39
40 .box-body input, button {
41 vertical-align: middle;
42 font-family: Tahoma, simsun;
43 font-size: 12px;
44 }
45
46 .box-body input[type=radio] {
47 height: 38px;
48 }
49
50 .box-body input[type=text],
51 .box-body input[type=password] {
52 border-color: #bbb;
53 height: 38px;
54 font-size: 14px;
55 border-radius: 2px;
56 outline: 0;
57 border: #ccc 1px solid;
58 padding: 0 10px;
59 width: 350px;
60 -webkit-transition: box-shadow .5s;
61 margin-bottom: 15px;
62 }
63
64 .box-body input[type=text]:hover,
65 .box-body input[type=text]:focus,
66 .box-body input[type=password]:hover,
67 .box-body input[type=password]:focus {
68 border: 1px solid #56b4ef;
69 box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 0 8px rgba(82, 168, 236, .6);
70 -webkit-transition: box-shadow .5s;
71 }
72
73 .box-body input::-webkit-input-placeholder {
74 color: #999;
75 -webkit-transition: color .5s;
76 }
77
78 .box-body input:focus::-webkit-input-placeholder,
79 input:hover::-webkit-input-placeholder {
80 color: #c2c2c2;
81 -webkit-transition: color .5s;
82 }
83
84 .box-body button[type=submit] {
85 padding: 4px 15px;
86 cursor: pointer;
87 width: 120px;
88 height: 40px;
89 background: #4393C9;
90 border: 1px solid #fff;
91 color: #fff;
92 font: 16px bolder;
93 }
94
95 .box-body button[type=reset] {
96 margin-left: 30px;
97 cursor: pointer;
98 width: 120px;
99 height: 40px;
100 background: #4393C9;
101 border: 1px solid #fff;
102 color: #fff;
103 font: 16px bolder;
104 }
105
106 .box-body .error {
107 border: 1px solid #FF3300;
108 background: #FFF2E5;
109 font-size: 10px;
110 height: 30px;
111 line-height: 30px;
112 margin-bottom: 10px;
113 padding: 0 10px;
114 }
115
116 .box-body .success {
117 border: 1px solid #01BE00;
118 background: #E6FEE4;
119 font-size: 10px;
120 height: 30px;
121 line-height: 30px;
122 margin-bottom: 10px;
123 padding: 0 10px;
124 }
125
126 </style>
127 <body>
128 <!--
129 1.设计一个用户注册页面，显示当前日期、时间和星期。注册内容包括用户名，密码及密码确认框，性别，邮箱，手机号码，一个提交按钮，一个重写按钮（清空所有文本框内容）。
130
131 提示：
132 A. 页面显示数据：document.write()
133 B. 当前日期、时间和星期：Date对象。
134 C. 获取表单中输入的数据：document.表单名.表单元素名.value
135 D. 密码及密码确认要求2次输入的内容相同，利用String对象的方法判断。
136 E. 文本框的内容及长度控制都利用String对象的方法。
137 F. 弹出新窗口window.open()
138 -->
139 <div class="box">
140 <div class="box-head">填写注册信息</div>
141 <div class="box-body">
142 <form id="registerForm" action="" method="post" onsubmit="return checkForm()">
143 <table>
144 <tr>
145 <th>当前时间：</th>
146 <td><p id="currentDate"></p></td>
147 <td>
148 <div></div>
149 </td>
150 </tr>
151 <tr>
152 <th>用户名称：</th>
153 <td><input type="text" id="userName" name="userName" placeholder="长度2-12位以内的中英文字符和数字"></td>
154 <td>
155 <div></div>
156 </td>
157 </tr>
158 <tr>
159 <th>密 码：</th>
160 <td><input type="password" id="passWord" name="passWord" placeholder="长度4-12位任意字符"></td>
161 <td>
162 <div></div>
163 </td>
164 </tr>
165 <tr>
166 <th>确认密码：</th>
167 <td><input type="password" id="confirmPwd" name="confirmPwd" placeholder="请再次输入密码进行确认"></td>
168 <td>
169 <div></div>
170 </td>
171 </tr>
172 <tr>
173 <th>性 别：</th>
174 <td><input type="radio" id="sexMale" name="sex" value="1"/><label for="sexMale">男</label>
175 <input type="radio" id="sexFemale" name="sex" value="0"/><label for="sexFemale">女</label></td>
176 <td>
177 <div></div>
178 </td>
179 </tr>
180 <tr>
181 <th>手机号码：</th>
182 <td><input type="text" id="tel" name="tel" placeholder="13、14、15、17、18开头的11位手机号"></td>
183 <td>
184 <div></div>
185 </td>
186 </tr>
187 <tr>
188 <th>电子邮箱：</th>
189 <td><input type="text" id="email" name="email" placeholder="用户名@域名（域名后缀至少2个字符）"></td>
190 <td>
191 <div></div>
192 </td>
193 </tr>
194 </table>
195 <div style="margin-top: 20px;margin-left: 70px;">
196 <button type="submit" id="submitFormBtn">注册</button>
197 <button type="reset">重置</button>
198 </div>
199 </form>
200 </div>
201 </div>
202
203
204 <script type="text/javascript">
205
206 //获取当前客户端系统时间
207 function getCurrentDate() {
208 var nowDate = new Date();
209 var year = nowDate.getFullYear();
210 var month = nowDate.getMonth() + 1;
211 var day = nowDate.getDate();
212 var myDay = nowDate.getDay();
213 var hours = nowDate.getHours();
214 var minute = nowDate.getMinutes();
215 var second = nowDate.getSeconds();
216 var weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
217 if (month >= 1 && month <= 9) {
218 month = "0" + month;
219 }
220 if (day >= 0 && day <= 9) {
221 day = "0" + day;
222 }
223 if (minute >= 0 && minute <= 9) {
224 minute = "0" + minute;
225 }
226 if (second >= 0 && second <= 9) {
227 second = "0" + second;
228 }
229 document.getElementById("currentDate").innerHTML = +year + "年" + month + "月" + day + "日 " + hours + ":" + minute + ":" + second + " " + weeks[myDay];
230 }
231
232 window.setInterval(getCurrentDate, 1000);
233
234 // 获取所有input框
235 var inputs = document.getElementsByTagName('input');
236 // 为每个input框添加失去焦点事件
237 for (var i = 0; i < inputs.length; i++) {
238 inputs[i].onblur = inputBlur;
239 }
240
241 function inputBlur() {
242 var name = this.name; // 获取输入框的name值
243 var val = this.value; // 获取输入框的value值
244 var tips = this.placeholder; // 获取输入框中的提示信息
245 var tips_obj = this.parentNode.parentNode.children[2].children[0]; // 获取提示信息显示的div元素对象
246 // 1. 去掉两端的空白字符
247 val = val.trim();
248 // 2. 文本框内容为空，给出提示信息
249 if (!val) {
250 error(tips_obj, '输入框不能为空');
251 return false;
252 }
253 // 3. 获取正则匹配规则和提示信息
254 var reg_msg = getRegMsg(name, tips);
255 // 4. 检测是否否he正则匹配
256 if (reg_msg['reg'].test(val)) {
257 // 匹配成功，显示成功的提示信息
258 success(tips_obj, reg_msg['msg']['success']);
259 } else {
260 // 匹配失败，显示失败的提示信息
261 error(tips_obj, reg_msg['msg']['error']);
262 }
263 }
264
265 /*
266 * A.用户名：2-12位以内的中英文字符和数字
267 * B.密码及密码确认：4-12位任意字符
268 * C.邮箱：含有@及.
269 * D.手机号码：由数字组成，11位
270 * E.每项都是必填项
271 * F.如果不满足以上要求，利用警告框（alert）给出相应的提示。
272 * G.添加适当的事件处理，如果用户填写正确，则在新窗口中显示“注册成功！”（新窗口没有菜单条，工具条和地址栏）
273 * */
274
275 // 根据input的name值，设置正则规则及提示信息
276 function getRegMsg(name, tips) {
277 var reg = msg = '';
278 switch (name) {
279 case 'userName':
280 reg = /^[a-zA-Z0-9]{2,12}$/;
281 msg = {'success': '用户名输入正确', 'error': tips};
282 break;
283 case 'passWord':
284 reg = /^.{4,12}$/;
285 msg = {'success': '密码输入正确', 'error': tips};
286 break;
287 case 'confirmPwd':
288 var con = document.getElementsByTagName('input')[1].value;
289 reg = RegExp("^" + con + "$");
290 msg = {'success': '两次密码输入正确', 'error': '两次输入的密码不一致'};
291 break;
292 case 'sex':
293 reg = /^[0-1]*$/;
294 msg = {'success': '性别已选择', 'error': '性别不能为空'};
295 break;
296 case 'tel':
297 reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
298 msg = {'success': '手机号码输入正确', 'error': tips};
299 break;
300 case 'email':
301 reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
302 msg = {'success': '邮箱输入正确', 'error': tips};
303 break;
304 }
305 return {'reg': reg, 'msg': msg};
306 }
307
308 // 成功
309 function success(obj, msg) {
310 obj.className = 'success';
311 obj.innerHTML = msg;
312 }
313
314 // 失败
315 function error(obj, msg) {
316 obj.className = 'error';
317 obj.innerHTML = msg + '，请重新输入';
318 }
319
320 /**
321 * 判断输入内容
322 * */
323 function checkInput(content) {
324 return !(content === "" || content.length === 0 || content === null || content === undefined);
325 }
326
327 document.getElementById("registerForm").onsubmit = function () {
328 var userName = document.getElementById("userName");
329 var passWord = document.getElementById("passWord");
330 var confirmPwd = document.getElementById("confirmPwd");
331 var gender = document.getElementsByName("sex");
332 var tel = document.getElementById("tel");
333 var email = document.getElementById("email");
334
335 var formElements = [userName, passWord, gender[0], confirmPwd, tel, email];
336 for (var i = 0; i < 6; i++) {
337 var tips_obj = formElements[i].parentNode.parentNode.children[2].children[0]; // 获取提示信息显示的div元素对象
338 if (checkInput(formElements[i].value) === false) {
339 error(tips_obj, '输入框不能为空');
340 return false;
341 }
342 if (tips_obj.className === 'error') {
343 return false;
344 }
345 }
346
347 var flag = false;//检查radio是否被选中
348
349 for (var j = 0; j < gender.length; j++) {
350 if (gender[j].checked) {
351 flag = true;
352 break;
353 }
354 }
355
356 if (flag === false) {
357 var tips = gender[0].parentNode.parentNode.children[2].children[0]; // 获取提示信息显示的div元素对象
358 error(tips, '性别不能为空');
359 return false;
360 }
361
362 alert("注册成功！");
363 window.location.reload();
364 return true;
365 };
366 </script>
367 <!--<script type="text/javascript" src="js/index.js"></script>-->
368 </body>
369 </html>
JavaScript实现表单的校验以及匹配正则表达式的更多相关文章
- form表单提交校验
<form id="myForm" action="http://www.365mini.com" method="post"> ...
- 项目总结15：JavaScript模拟表单提交(实现window.location.href-POST提交数据效果)
JavaScript模拟表单提交(实现window.location.href-POST提交数据效果) 前沿 1-在具体项目开发中,用window.location.href方法下载文件,因windo ...
- 第一百五十九节，封装库--JavaScript，表单序列化结合ajax提交数据
封装库--JavaScript,表单序列化结合ajax提交数据 封装库,表单序列化方法 /** xu_lie_biao_dan()方法,表单序列化方法,将自动获取指定表单里面的各项字段name值和va ...
- 第一百五十四节，封装库--JavaScript，表单验证--提交验证
封装库--JavaScript,表单验证--提交验证 将表单的所有必填项,做一个判断函数,填写正确时返回布尔值 最后在提交时,判断每一项是否正确,全部正确才可以 提交 html <div id= ...
- 第一百五十三节，封装库--JavaScript，表单验证--备注字数验证
封装库--JavaScript,表单验证--备注字数验证 效果图 html <div id="reg"> <h2 class="tuo"> ...
- 第一百五十二节，封装库--JavaScript，表单验证--年月日注入
封装库--JavaScript,表单验证--年月日注入 效果图 html <div id="reg"> <h2 class="tuo"> ...
- 第一百五十一节，封装库--JavaScript，表单验证--密码确认验证--回答验证--电子邮件验证加自动补全
封装库--JavaScript,表单验证--密码确认验证--回答验证--电子邮件验证加自动补全 效果图 html <div id="reg"> <h2 class ...
- 第一百五十节，封装库--JavaScript，表单验证--密码验证
封装库--JavaScript,表单验证--密码验证 效果图 html <div id="reg"> <h2 class="tuo">& ...
- 第一百四十九节，封装库--JavaScript，表单验证--验证用户名
封装库--JavaScript,表单验证--验证用户名 注册验证功能,顾名思义就是验证表单中每个字段的合法性,如果全部合法才可以提交表单. 效果图 聚集光标时 信息不合法是 信息合法时 html &l ...
随机推荐
- 【译】ASP.NET Core 6 中的性能改进
原文 | Brennan Conroy 翻译 | 郑子铭 受到 Stephen Toub 关于 .NET 性能的博文的启发,我们正在写一篇类似的文章来强调 6.0 中对 ASP.NET Core 所做 ...
- 教你如何解决JS/TS里特定String进行拆分然后遍历各个元素
摘要:我们需要先判断特定String里是否包含我们需要的元素,针对这个元素对这个字符串进行拆分,遍历各个元素. 本文分享自华为云社区<JavaScript/TypeScript项目里如何对特定S ...
- laravel 解决跨域问题并封装到中间件
larav 官方手册有详细的步骤 https://learnku.com/articles/6504/laravel-cross-domain-solution 我们在用 laravel 进行开发的时 ...
- think php 登录日记
*/ public function save(Request $request) { // $params = $request->param(); $file = $request-> ...
- C#+SQL Server的数据库管理系统常用的代码
数据库管理系统 数据库管理系统(Database Management System)是一种操纵和管理数据库的大型软件,用于建立.使用和维护数据库,简称DBMS.它对数据库进行统一的管理和控制,以保证 ...
- java-Dos
打开CMD的方式 1.菜单打开 2.Windows+R 输入cmd 3.shift+鼠标右键 选择在此处打开命令行窗口 4.资源管理器地址栏前+cmd 空格 管理员身份运行 常用的Dos命令 #盘符切 ...
- 时间模块 time 随机模块random os模块，sys模块
时间模块 time #时间模块 import time #三种格式 #时间戳时间:是一个浮点数,以秒为单位,计算机用语 #结构化时间 :是一个元组 #用于中间转换 #格式化时间:str数据类型, 用 ...
- 计算机网络：套接字（Socket）| Python socket实现服务器端与客户端通信，使用TCP socket阿里云ECS服务器与本机通信
所谓套接字(Socket),就是对网络中不同主机上的应用进程之间进行双向通信的端点的抽象.一个套接字就是网络上进程通信的一端,提供了应用层进程利用网络协议交换数据的机制.从所处的地位来讲,套接字上联应 ...
- APUE1--3.8-3.10wirte、read函数以及IO效率
1read函数 #include<unistd.h> ssize_t read(int fd,void* buf,size_t nbytes) 返回值:读到的字节数,若已到文件尾,返回0; ...
- 一条SQL语句执行得很慢的原因有哪些
说实话,这个问题可以涉及到 MySQL 的很多核心知识,可以扯出一大堆,就像要考你计算机网络的知识时,问你"输入URL回车之后,究竟发生了什么"一样,看看你能说出多少了. 之前腾讯 ...