JS-DOM编程-04-表单验证
1.表单验证要求
- 用户名不能为空，且长度必须在6～14位之间。
- 用户名只能由数字和字母组成，不能含有其他符号。（正则表达式）
- 密码不能为空，且长度必须在6~20位之间。
- 密码和确认密码必须一致
- 邮箱地址不能为空，且必须合法。
- 统一失去焦点时验证。
- 错误提示信息统一在span标签中提示，并且要求字体12号，红色。
- 文本框再次获得焦点后，清空错误提示信息。如果文本框中数据不合法,要求清空文本框的value。
- 最终表单中所有项均合法才能提交。
2.实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单验证</title>
<style type="text/css">
/* 设置span中字体大小 */
span {
color: red;
font-size: 12px;
}
</style>
<!--
1. 用户名不能为空。
2. 用户名长度必须在6～14位之间。
3. 用户名只能由数字和字母组成，不能含有其他符号。（正则表达式）
4. 密码和确认密码一致
5. 邮箱地址合法。
6. 统一失去焦点时验证。
7. 错误提示信息统一在span标签中提示，并且要求字体12号，红色。
8. 文本框再次获得焦点后，清空错误提示信息。如果文本框中数据不合法,要求清空文本框的value。
9. 最终表单中所有项均合法才能提交。
-->
</head>
<body>
<script type="text/javascript">
window.onload = function() {
//1.失去焦点时验证用户名是否合法
//获取用户文本框后面的提示信息区span对象
var userMessageElt = document.getElementById("userMessage");
//获取用户名文本框对象
var usernameElt = document.getElementById("username");
usernameElt.onblur = function() {
//1.1验证用户名长度是否合法
//获取用户名字符串并去除两侧空白
var username = usernameElt.value.trim();
if(username.length == 0) {
userMessageElt.innerText = "请输入用户名!";
} else {
if(username.length < 6 || username.length > 14) {
userMessageElt.innerText = "用户名长度必须为6-14!";
} else {
//1.2验证用户名是否符合标准格式
//创建用户名对应的正则表达式对象
var userRegExp = /^[A-Za-z0-9]+$/;
var isOk = userRegExp.test(username);
if(!isOk) {
userMessageElt.innerText = "用户名输入不合法!";
}
}
}
//清除提示信息和不合法字符串
back(usernameElt,userMessageElt);
}
//2.密码不能为空，且密码长度必须为6-20
//获取密码文本框后面的提示信息区span对象
var pwdMessage = document.getElementById("pwdMessage");
//获取密码文本框对象
var passwordElt = document.getElementById("password");
passwordElt.onblur = function() {
//获取密码并去除左右空白
var password = passwordElt.value.trim();
//密码不能为空
if(password.length == 0) {
pwdMessage.innerText = "请输入密码!";
} else if(password.length <6 || password.length > 20){
pwdMessage.innerText = "密码长度必须为6-20!";
}
//光标回到文本框时清楚提示信息及不合法的密码
back(passwordElt,pwdMessage);
}
// 3. 密码和确认密码一致
//获取确认密码文本框后面的提示信息区span对象
var conPwdMessage = document.getElementById("conPwdMessage");
//获取确认密码文本框对象
var confirmPasswordElt = document.getElementById("confirmPassword");
confirmPasswordElt.onblur = function() {
//获取密码文本框对象
var passwordElt = document.getElementById("password");
//获取密码并去除左右空白
var password = passwordElt.value.trim();
//获取重复输入的密码并去除空白
var confirmPassword = confirmPasswordElt.value.trim();
//密码不能为空
if(password.length == 0 ) {
conPwdMessage.innerText = "请输入密码!";
} else if(confirmPassword.length == 0) {
conPwdMessage.innerText = "请输入确认密码!";
} else {
if(password.length <6 || password.length > 20) {
conPwdMessage.innerText = "密码长度必须为6-20!";
} else if(password != confirmPassword) {
conPwdMessage.innerText = "前后输入密码不一致!";
}
}
//光标回到文本框时清楚提示信息及不合法的密码
back(confirmPasswordElt,conPwdMessage);
}
//4.检验邮箱地址是否合法
//获取邮箱地址文本框后面的提示信息区span对象
var emailMessageElt = document.getElementById("emailMessage");
//获取邮箱地址文本框对象
var emailElt = document.getElementById("email");
emailElt.onblur = function() {
//获取用户在文本框中输入的字符串，并去除两侧空白
var email = document.getElementById("email").value.trim();
//邮箱地址不能为空
if(email.length == 0) {
emailMessageElt.innerText = "请输入邮箱地址!"
} else {
//创建邮箱对应的正则表达式对象
var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
//调用test方法验证用户输入的邮箱字符串格式，返回一个boolean值
var isOk = emailRegExp.test(email);
if(!isOk) {
emailMessageElt.innerText = "邮箱格式不合法!";
}
}
//文本框获得焦点时，清除提示信息和不合法value
back(emailElt,emailMessageElt);
}
//5. 文本框再次获得焦点后，清除提示信息和不合法字符串
//定义一个函数，传入文本框对象、文本框后面的提示信息区span对象
var back = function(textElt,messageElt) {
textElt.onfocus = function() {
//判断文本框value是否合法
if(messageElt.innerHTML != "") {
this.value = "";
}
//清空提示信息
messageElt.innerHTML = "";
}
}
//6.当所有项都合法时，才能提交
//获取注册按钮对象
var subBtnElt = document.getElementById("subBtn");
subBtnElt.onclick = function() {
//在提交前，手动触发一次所有项的blur事件
//触发用户名文本框的blur事件
usernameElt.focus();
usernameElt.blur();
//触发密码文本框的blur事件
passwordElt.focus();
passwordElt.blur();
//触发确认密码文本框的blur事件
confirmPasswordElt.focus();
confirmPasswordElt.blur();
//触发邮箱地址文本框的blur事件
emailElt.focus();
emailElt.blur();
//判断所有项是否合法，如果都合法，才能提交表单
if(userMessageElt.innerText.length == 0 && pwdMessage.innerText.length == 0 && conPwdMessage.innerText.length == 0 && emailMessageElt.innerText.length == 0) {
//获取表单对象
var formElt = document.getElementById("userForm");
//提交表单
formElt.submit();
}
}
}
</script>
<form id="userForm" action="http://127.0.0.1:8080/123" method="get">
<!-- <form id="userForm" method="GET"> -->
<table>
<!-- 用户名 -->
<tr>
<td>用户名：</td>
<td>
<input type="HTML" id="username" name="username">
</td>
<!-- 用户名提示信息显示区 -->
<td>
<span id="userMessage"></span>
</td>
</tr>
<!-- 密码 -->
<tr>
<td>密码：</td>
<td>
<input type="password" id="password" name="password">
</td>
<!-- 密码提示信息显示区 -->
<td>
<span id="pwdMessage"></span>
</td>
</tr>
<!-- 确认密码 -->
<tr>
<td>确认密码：</td>
<td>
<input type="password" id="confirmPassword">
</td>
<!-- 确认密码提示信息显示区 -->
<td>
<span id="conPwdMessage"></span>
</td>
</tr>
<!-- 邮箱地址 -->
<tr>
<td>邮箱地址：</td>
<td>
<input type="text" id="email" name="email">
</td>
<!-- 邮箱地址提示信息显示区 -->
<td>
<span id="emailMessage"></span>
</td>
</tr>
<!-- 提交表单 -->
<tr>
<td>
<input type="button" value="注册" id="subBtn">
</td>
<!-- 重置 -->
<td>
<input type="reset" value="重置">
</td>
</tr>
</table>
</form>
</body>
</html>
