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 ...
随机推荐
- Vue基础知识的巩固与学习
生命周期的解析和应用: Vue 实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom→渲染.更新→渲染.卸载等一系列过程,我们称这是 Vue 的生命周期.通俗说就是 Vue 实 ...
- webpack--性能优化之打包构建速度和代码调试优化
前言 本文来总结写webpack 在性能方面常见的优化方案. 正文 本文分别总结开发环境和生产环境中在打包构建速度和代码调试功能方面的优化方案,如下: 1.开发环境性能优化 (1)优化打包构建速度 a ...
- 使用PostgreSQL 脚本导出数据库的DDL
使用PostgreSQL 脚本导出数据库的DDL 本文主要介绍如何使用基于 PostgreSQL pgdump编写的自定义脚本来导出数据库的DDL. 一.文件说明: 1.pgdump基础语句.sql: ...
- laravel7 权限菜单设置简易升缩
1:数据库填写数据,pid=0为顶级菜单,pid=对应的id为顶级菜单的子菜单 2:laravel7 创建模型并链接对应的表名 <?php namespace App\models; use I ...
- Laravel消息队列怎么使用
使用database驱动做队列 下面是简单使用教程 1. 修改.env文件配置 QUEUE_CONNECTION=sync改成QUEUE_CONNECTION=database 默认的sync是同步队 ...
- ElasticSearch安装 --- windows版
文件下载地址: 链接:https://pan.baidu.com/s/1_Cy_Sy1-vOvsUxliM-EZHQ 提取码:qpcv 定义: Elasticsearch 是一个分布式的搜索和分析引擎 ...
- Map 集合
<零基础学Java > Map 集合 在程序中需要存储具有映射关系就需要使用Map集合了. Map集合由Map接口.Map接口的实现类组成. Map 接口 Map接口没有Collectio ...
- Django基础五之Ajax
Django基础五之Ajax 目录 Django基础五之Ajax 1. Ajax介绍 2. Ajax前后端传值 2.1 方法一HttpResponse直接返回 2.2 方法二使用Json格式返回 2. ...
- mysql or in union all 使用方法
or的用法 select * from bt where bt.ID =98 or bt.ID = 1222 or bt.ID = 8903; in 的用法 select * from bt wher ...
- dotnet 委托的实现解析
缘起 最近被问到什么是.Net中的委托.问题虽然简单却无从回答.只能说委托是托管世界的函数指针,这么说没啥大毛病,但也都是毛病(当时自己也知道这么说不太对,不过自己不太爱用这个也没准备确实没有更好的答 ...