点击clone仓库代码

HTML

<!DOCTYPE html>
<html>
<head>
	<title>表单验证</title>
</head>
<body>
	<link rel="stylesheet" type="text/css" href="表单验证.css">
	<script type="text/javascript" src="表单验证.js"></script>
<!-- 
表单验证:
	(1)用户名不能为空
	(2)用户名必须在6-14位之间
	(3)用户名只能由数字和字母组成,不能含其他符号(正则表达式)
	(4)密码(至少6位)和确认密码一致,邮箱地址合法。
	(5)统一失去焦点验证
	(6)错误提示信息统一在span标签中提示,字体10号蓝色
	(7)文本框再次获得焦点后,清空提示信息,如果文本框数据不合法要求清空文本框的value
	(8)最终表单中的所有项均合法方可提交
-->
	<br><br><br><br><br>
	<!-- 实际开发中应该将method属性置为:"post"(提交信息不会显示到地址栏上) -->
	<form action="https://www.project/os/dj/" method="get" id="userForm">
		<table align="center" border="2px" width="550px" height="200px">
			<tr>
				<td align="center" width="150px">用户名</td>
				<td>
					<input type="text" name="username" id="username">
					<span id="usernameSpan"></span>
				</td>
			</tr>
			<tr>
				<td align="center" width="150px">密码</td>
				<td>
					<input type="password" name="password" id="password">
					<span id="passwordSpan"></span>
				</td>
			</tr>
			<tr>
				<td align="center" width="150px">确认密码</td>
				<td>
					<input type="password" name="password2" id="password2">
					<span id="password2Span"></span>
				</td>
			</tr>
			<tr>
				<td align="center" width="150px">邮箱</td>
				<td>
					<input type="email" placeholder="" name="email" id="email">
					<span id="emailSpan"></span>
				</td>
			</tr>
			<tr>
				<td align="center" colspan="2">
					<input type="button" value="提交" id="submitButton">
					<input type="reset" value="重置">
				</td>
			</tr>
		</table>
	</form>
</body>
</html>

CSS

span{
	font-size: 10px;
	color: blue;
}

JavaScript

window.onload = function() {
	// 首先将所有用户输入框置为false,用户直接点击提交表单不会通过校验。
	var isUsernameOk = false;
	var isPasswordOk = false;
	var isPassword2Ok = false;
	var isEmailOk = false;

	// 获取用户名输入框对象
	var usernameObj = document.getElementById("username");
	// 用户名输入框 提示信息
	var usernameSpan = document.getElementById("usernameSpan");
	usernameObj.onblur = function() {
		var usernameValue = usernameObj.value;
		// 去除用户名前后空白
		usernameValue = usernameValue.trim();
		var usernameRegex = /^[a-zA-Z0-9]{6,14}$/;
		isUsernameOk = usernameRegex.test(usernameValue);
		if (usernameValue === "") {
			usernameSpan.innerText = "用户名不能为空";
		} else if (isUsernameOk) {
			usernameSpan.innerText = "√";
		} else {
			usernameSpan.innerText = "用户名由6-14位的数字或字母组成";
		}
	}
	usernameObj.onfocus = function() {
		usernameSpan.innerText = "";
	}

	
	// 获取密码输入框对象
	var passwordObj = document.getElementById("password");
	// 密码输入框 提示信息
	var passwordSpan = document.getElementById("passwordSpan");
	passwordObj.onblur = function() {
		var passwordValue = passwordObj.value;
		var passwordRegex = /^.{6,}$/;
		isPasswordOk = passwordRegex.test(passwordValue);
		if (passwordValue === "") {
			passwordSpan.innerText = "密码不能为空";
		} else if (!isPasswordOk) {
			passwordSpan.innerText = "密码最少6位";
		} else {
			passwordSpan.innerText = "√";
		}
	}
	passwordObj.onfocus = function() {
		passwordSpan.innerText = "";
	}

	
	// 获取确认密码输入框对象
	var password2Obj = document.getElementById("password2");
	// 密码确认框 提示信息
	var password2Span = document.getElementById("password2Span");
	password2Obj.onblur = function() {
		var passwordValue = document.getElementById("password").value;
		var password2Value = password2Obj.value;
		if (password2Value === "") {
			password2Span.innerText = "请再次输入以确认密码";
		} else if (passwordValue != password2Value) {
			password2Span.innerText = "两次输入的密码不一致,请重新输入。";
		} else {
			password2Span.innerText = "√";
			isPassword2Ok = true;
		}
	}
	password2Obj.onfocus = function() {
		// 如果确认密码和之前输入密码不一致
		if (password2Span.innerText != "√") {
			// 将确认密码框清空
			password2Obj.value = "";
		}
		password2Span.innerText = "";
	}

	
	// 获取邮箱输入框对象
	var emailObj = document.getElementById("email");
	// 邮箱输入框 提示信息
	var emailSpan = document.getElementById("emailSpan");
	emailObj.onblur = function() {
		var emailValue = emailObj.value;
		var emailRegex = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
		isEmailOk = emailRegex.test(emailValue);
		if (emailValue === "") {
			emailSpan.innerText = "请输入邮箱地址";
		} else if (!isEmailOk) {
			emailSpan.innerText = "输入的邮箱地址不合法,请重新输入。";
		} else {
			emailSpan.innerText = "√";
			isEmailOk = true;
		}
	}
	emailObj.onfocus = function() {
		emailSpan.innerText = "";
	}

	// 提交表单
	var submitObj = document.getElementById("submitButton");
	submitObj.onclick = function() {
		usernameObj.focus();
		usernameObj.blur();

		passwordObj.focus();
		passwordObj.blur();

		password2Obj.focus();
		password2Obj.blur();

		emailObj.focus();
		emailObj.blur();
		if (isUsernameOk &amp;&amp; isPasswordOk &amp;&amp; isPassword2Ok &amp;&amp; isEmailOk) {
		/*if (usernameSpan.innerText == "√" &amp;&amp; passwordSpan.innerText == "√"  &amp;&amp; password2Span.innerText == "√" &amp;&amp; emailSpan.innerText == "√") 
		{*/
			// 表单校验全部通过的话,调用form表单的submit()方法提交表单。
			document.getElementById("userForm").submit();
		}
	}
}

预览


Deng Jia

Keep Moving.

0 条评论

发表评论

电子邮件地址不会被公开。