Javascript完成表单验证

最新推荐文章于 2022-08-29 17:56:19 发布

MF_sprite

最新推荐文章于 2022-08-29 17:56:19 发布

阅读量5.2k

点赞数 2

分类专栏： Java 学习学习前端文章标签： javascript

本文链接：https://blog.csdn.net/mf_sprite/article/details/107897804

版权

Java 同时被 3 个专栏收录

21 篇文章 1 订阅

订阅专栏

学习学习

15 篇文章 0 订阅

订阅专栏

前端

4 篇文章 0 订阅

订阅专栏

我来了！
在这里插入图片描述

javascript表单验证完成以下目标

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

编写email的正则：emailRegExp = /^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$/

用户名的正则：regExp = /^ [A-Za-z0-9]+$/

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单验证</title>
		<style type="text/css">
			span {
				color: red;
				font-size: 12px;
			}
		</style>
	</head>
	<body>
		<script type="text/javascript">
		   window.onload = function(){
			   // 获取username的span标签
			   var usernameErrorSpan = document.getElementById("usernameError");
			   // 给用户名文本框绑定blur事件
			   var usernameElt = document.getElementById("username");
			   usernameElt.onblur = function(){
				   // 获取用户名
				   var username = usernameElt.value;
				   // 去除前后空白
				   username = username.trim();
				   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]+$/;
						   var ok = regExp.test(username);
						   if(ok){
							   // 用户名最终合法
						   }else{
							   // 用户名中含有特殊符号
							   usernameErrorSpan.innerText = "用户名只能由数字和字母组成";
						   }
					   }
				   }
			   }
			   
			   // 给username这个文本框绑定获得焦点事件
			   usernameElt.onfocus = function(){
				   // 清空非法的value
				   if(usernameErrorSpan.innerText != ""){
					   usernameElt.value = "";   
				   }
				   // 清空span
				   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{
					   // 密码一致
				   }
			   }			   
			   // 绑定focus事件
			   userpwd2Elt.onfocus = function(){
				   if(pwdErrorSpan.innerText != ""){
					   userpwd2Elt.value = "";
				   }
				   pwdErrorSpan.innerText = "";
			   }
			   
			   // 获取email的span
			   var emailSpan = document.getElementById("emailError");
			   // 给email绑定blur事件
			   var emailElt = document.getElementById("email");
			   emailElt.onblur = function(){
				   // 获取email
				   var email = emailElt.value;
				   var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
				   var ok = emailRegExp.test(email);
				   if(ok){
					   // 合法
				   }else{
					   // 不合法
					   emailSpan.innerText = "邮箱地址不合法";
				   }
			   }
			   
			   // 给emailElt绑定focus
			   emailElt.onfocus = function(){
				   if(emailSpan.innerText != ""){
					   emailElt.value = "";
				   }
				   emailSpan.innerText = "";
			   }
			   
			   // 给提交按钮绑定鼠标单击事件
			   var submitBtnElt = document.getElementById("submitBtn");
			   submitBtn.onclick = function(){
				   usernameElt.focus();
				   usernameElt.blur();
				   
				   userpwd2Elt.focus();
				   userpwd2Elt.blur();
				   
				   emailElt.focus();
				   emailElt.blur();
				   
				   // 当所有表单项都是合法的时候,提交表单
				   if(usernameErrorSpan.innerText == "" && pwdErrorSpan.innerText == "" && emailSpan.innerText == ""){
					   // 获取表单对象
					   var userFormElt = document.getElementById("userForm");
					   // 设置action
					   userFormElt.action = "http://localhost:8080/jd/save";
					   // 提交表单
					   userFormElt.submit();
				   }
			   }
		   }
		</script>
		<form id="userForm" 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="注册" /> -->
			<input type="button" value="注册" id="submitBtn"/>
			<input type="reset" value="重置" />
		</form>
		
	</body>
</html>