用html+css+js写一个可以验证表单（附全部代码）

先来看看成果吧



在看代码之前，我们先要认识这三个事件：

onfocus 事件: 获得焦点事件
onblur : 失去焦点
onkeyup : 按键抬起事件

以下是代码：

这是表单的代码

			<form action="" method="post" onsubmit="return checkForm()">
				<h3>用户注册</h3>
				<hr />
				<p>
					账号：<input type="text" placeholder="请输入12位账号" 
					onfocus="showMsg('span_accountNumber','请输入12位账号')" 
					onblur="checkAccountNumber()"
					onkeyup="checkAccountNumber()"
					name="accountNumber" id="accountNumber"/>
					<span id="span_accountNumber"></span>
				</p>
				<p>
					用户名：<input type="text" placeholder="请输入用户名" 
					onfocus="showMsg('span_username','用户名长度为3~16位')"
					onblur="checkUsername()"
					onkeyup="checkUsername()"
					name="username" id="username" />
					<span id="span_username"></span>
				</p>
				<p>
					密码：<input type="password" placeholder="请输入密码" 
					onfocus="showMsg('span_password','密码长度大于8位')"
					onblur="checkPassword()"
					onkeyup="checkPassword()"
					name="password" id="password"/>
					<span id="span_password"></span>
				</p>
				<p>
					确认密码：<input type="password" placeholder="请再次输入密码" 
					onfocus="showMsg('span_rpassword','请两次密码保持一致')"
					onblur="checkRpassword()"
					onkeyup="checkRpassword()"
					name="rpassword" id="rpassword"/>
					<span id="span_rpassword"></span>
				</p>
				<p><input type="submit" value="注册" id="button"></p>
				<p><a href="login.html"><font size="3" color="blue">返回登陆</font></a></p>
			</form>

这是css样式

	<style>	
		.form {
			background: url(img/background02.jpg);
			width: 600px;
			height: 350px;
			position: absolute;
			top: 30%;
			left: 30%;
			border: 1px solid gray;
		}
		
		#button{
		    border: 10px solid orange;
		    width: 100px;
			height: 40px;
		    box-shadow:0px 4px 5px #666;
		    background: orange;        
		    color: white;    
		}
		
		input[type]{
		    border: 1px solid darkorange;
		    background: white;
		}	
	</style>

最后是js验证表单的代码

	<script>
		function showMsg(spanID,msg){
			//首先要获得要操作元素 span
			var span = document.getElementById(spanID);
			span.innerHTML = msg;
		}
		
		//校验账号是否是12位	
		function checkAccountNumber() {
			//获取用户输入的内容
			var avalue = document.getElementById("accountNumber").value;
			//对输入的内容进行校验
			//获得要显示结果的span
			var span = document.getElementById("span_accountNumber");
			if(avalue.length != 12){
				//显示校验结果
				span.innerHTML = "<font color='red' size='2'>账号必须为12位</font>";
				return false;
			}else{
				span.innerHTML = "<font color='green' size='2'>可用</font>";
				return true;
			}
		}
		
		
		//校验用户名是否符合规范
		function checkUsername() {
			//获取用户输入的内容
			var value = document.getElementById("username").value;
			//获取要显示的结果的span
			var span = document.getElementById("span_username");
			if(value.length < 3 || value.length > 16) {
					span.innerHTML = "<font color='red' size='2'>不可用</font>";
					return false;
			}else {
				span.innerHTML = "<font color='green' size='2'>可用</font>";
				return true;
			}
		}
		
		//校验密码是否符合规范
		function checkPassword() {
			//获取用户输入的内容
			var value = document.getElementById("password").value;
			//获取要显示的结果的span
			var span = document.getElementById("span_password");
			if(value.length > 8) {
				span.innerHTML = "<font color='green' size='2'>可用</font>";
				return true;
			}else{
				span.innerHTML = "<font color='red' size='2'>密码过短</font>";
				return false;
			}
		}
		
		//校验两次密码是否一致
		function checkRpassword() {
			//获取第一次密码的内容
			var pvalue = document.getElementById("password").value;
			//获取第二次密码的内容
			var rpvalue = document.getElementById("rpassword").value;
			//获取要显示的结果的span
			var span = document.getElementById("span_rpassword");
			if(pvalue == rpvalue) {
				span.innerHTML = "<font color='green' size='2'>密码一致</font>";
				return true;
			}else{
				span.innerHTML = "<font color='red' size='2'>密码不一致</font>";
				return false;
			}
		}
       //总体判断
		function checkForm() {
			var flag = checkAccountNumber() && checkUsername() && checkPassword() && checkRpassword();
			return flag;
		}
	</script>

本文章转载自 https://blog.csdn.net/weixin_44665028/article/details/98525477