JavaScript第十二章 DOM编程之表单验证

最新推荐文章于 2022-07-15 19:32:24 发布

Jayco-J

最新推荐文章于 2022-07-15 19:32:24 发布

阅读量295

点赞数 2

分类专栏： JavaScript学习路线文章标签： javascript js dom

本文链接：https://blog.csdn.net/LvJzzZ/article/details/108273221

版权

JavaScript学习路线专栏收录该内容

22 篇文章 0 订阅

订阅专栏

JavaScript自我学习路线

DOM编程之表单验证
- 一、题目描述
- 二、测试用例

DOM编程之表单验证

一、题目描述

用户名不能为空
用户名必须在6-14位之间
用户名只有数字和字母组成，不能含有其他符号（正则表达式）
密码和确认密码一致，邮箱地址合法
统一失去焦点验证
错误提示信息统一在span标签中提示，并且要求字体12号、红色
文本框再次获得焦点后，清空错误提示信息，如果文本框中数据不合法要求清空文本框的value
最终表单所有项均合法方可提交

二、测试用例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>表单验证</title>
		<style type="text/css">
			span {
				color: red;
				font-size: 12px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				// 给用户名文本框绑定blur事件
				var usernameElt = document.getElementById("username");
				usernameElt.onblur = function() {
					// 获取用户名
					var username = usernameElt.value;
					// 去除前后空白
					username = username.trim();
					// 判断用户是否为空
					// 方式一
					/* if(username){
						// 代表username不是空字符串
						alert(username);
					} else {
						// 代表username是空字符串
						alert("username是空字符串");
					} */
					// 方式二
					/* if(username.length == 0){
						alert("username是空字符串");
					} else {
						alert(username);
					} */
					// 获取username的span标签(不使用var声明，因为在其他作用域使用了usernameErrorSpan)
					usernameErrorSpan = document.getElementById("usernameError");
					// 方式三
					if (username === "") {
						// 用户名为空
						usernameErrorSpan.innerText = "用户名不能为空";
					} else {
						// 用户名不为空
						// 判断长度[6-14]
						if (username.length < 6 || username.length > 14) {
							// 用户名长度非法
							usernameErrorSpan.innerText = "用户名长度必须在6-14";
						} else {
							// 用户名长度合法
							// 继续判断是否含有特殊符号
							var regExp = /^[A-Za-z0-9]+$/;
							if (regExp.test(username)) {
								// 用户名合法
							} else {
								// 用户名非法(用户名中含有特殊符号)
								usernameErrorSpan.innerText = "用户名只能由数字和字母组成";
							}
						}

					}
				}
				// 给username这个文本框绑定获得焦点事件
				usernameElt.onfocus = function() {
					// 清空非法的value
					if (usernameErrorSpan.innerText != "") {
						// 非法
						usernameElt.value = "";
					}
					// 清空span(先清空非法的value，否则span先清空，则不会执行if条件判断)
					usernameErrorSpan.innerText = "";
				}

				// 获取密码错误提示的span标签
				var pwdErrorSpan = document.getElementById("pwdError");
				// 获取确认密码框对象
				var userpwd2Elt = document.getElementById("userpwd2");
				// 绑定blur事件
				userpwd2Elt.onblur = function() {
					// 获取密码和确认密码
					var userpwdElt = document.getElementById("userpwd");
					var userpwd = userpwdElt.value;
					var userpwd2 = userpwd2Elt.value;
					if (userpwd != userpwd2) {
						// 密码不一致
						pwdErrorSpan.innerText = "密码不一致";
					} else {
						// 密码一致
					}
				}
				// 给userpwd2Elt绑定focus事件
				userpwd2Elt.onfocus = function() {
					if (pwdErrorSpan.innerText != "") {
						// 非法
						userpwd2Elt.value = "";
					}
					// 清空span(先清空非法的value，否则span先清空，则不会执行if条件判断)
					pwdErrorSpan.innerText = "";
				}

				// 获取email的span标签
				var emailSpan = document.getElementById("emailError");
				// 给email绑定blur事件
				var emailElt = document.getElementById("email");
				emailElt.onblur = function() {
					// 获取email
					var email = emailElt.value;
					// 编写email的正则表达式
					var emailRegExp = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
					if (emailRegExp.test(email)) {
						// 合法

					} else {
						// 非法
						emailSpan.innerText = "邮箱地址不合法";
					}
				}
				// 给emailElt绑定focus事件
				emailElt.onfocus = function() {
					if (emailSpan.innerText != "") {
						// 非法
						emailElt.value = "";
					}
					// 清空span(先清空非法的value，否则span先清空，则不会执行if条件判断)
					emailSpan.innerText = "";
				}

				// 给提交按钮绑定鼠标单击事件
				var submitBtnElt = document.getElementById("submitBtn");
				submitBtnElt.onclick = function() {
					// 触发username的blur事件、userpwd2的blur事件、email的blur事件
					// 即不使用人工操作，纯JS代码触发事件
					usernameElt.focus();
					usernameElt.blur();

					userpwd2Elt.focus();
					userpwd2Elt.blur();

					emailElt.focus();
					emailElt.blur();

					// 当所有表单项都是合法的时候，提交表单
					if (usernameErrorSpan.innerText == "" && pwdErrorSpan.innerText == "" && emailSpan.innerText == "") {
						// 获取表单对象
						var userFormElt = document.getElementById("userForm");
						// 提交表单
						userFormElt.submit();
					}
				}
			}
		</script>
	</head>
	<body>
		<form id="userForm" action="#" method="get">
			用户名<input type="text" name="username" id="username" /><span id="usernameError"></span><br>
			密码<input type="text" name="userpwd" id="userpwd" /><br>
			确认密码<input type="text" id="userpwd2" /><span id="pwdError"></span><br>
			邮箱<input type="text" name="email" id="email" /><span id="emailError"></span><br>
			<!-- <input type="submit" value="注册" /> -->
			<!-- submit会自动提交 -->
			<input type="button" value="注册" id="submitBtn" />
			<input type="reset" value="重置" />
		</form>
	</body>
</html>

Jayco-J

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript第十二章 DOM编程之表单验证

JavaScript自我学习路线DOM编程之表单验证一、题目描述二、测试用例DOM编程之表单验证一、题目描述用户名不能为空用户名必须在6-14位之间用户名只有数字和字母组成，不能含有其他符号（正则表达式）密码和确认密码一致，邮箱地址合法统一失去焦点验证错误提示信息统一在span标签中提示，并且要求字体12号、红色文本框再次获得焦点后，清空错误提示信息，如果文本框中数据不合法要求清空文本框的value最终表单所有项均合法方可提交二、测试用例...
复制链接

扫一扫