JavaScript之表单验证

最新推荐文章于 2024-05-31 21:02:06 发布

mr_tangshuai

最新推荐文章于 2024-05-31 21:02:06 发布

阅读量275

点赞数

分类专栏： html css javascript 文章标签：表单

本文链接：https://blog.csdn.net/mr_tangshuai/article/details/78499440

版权

html 同时被 3 个专栏收录

13 篇文章 0 订阅

订阅专栏

javascript

11 篇文章 0 订阅

订阅专栏

css

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{outline: none;}
			.field label{
				display: inline-block;
				width:80px;
			}
			#agree+label{
				display: inline;
			}
			.success{
				border:1px solid #5eb95e;
			}
			.fail{
				border:1px solid #dd514c;
			}
			/*伪类设置 元素聚焦时样式*/
			input[type=text]:focus,input[type=password]:focus{
				border:1px solid royalblue;
			}
			span{
				color:#f00;
			}
		</style>
	</head>
	<body>
		<form action="doReg.html" id="f1">
			<div class="field">
				<label for="username">账号:</label>
				<input type="text"  id="username" name="username" οnblur="req(this,'vname')"/>
				<span id="vname"></span>
			</div>
			<div class="field">
				<label for="password">密码:</label>
				<input type="password" id="password" name="password"  οnblur="len(this,'vpass')"/>
				<span id="vpass"></span>
			</div>
			<div class="field">
				<label for="repassword">重复密码:</label>
				<input type="password" id="repassword" name="repassword"   οnblur="validateRepass(this,$('password'),'vrepass')"/>
				<span id="vrepass"></span>
			</div>
			<div class="field">
				<label for="email">邮箱地址:</label>
				<input type="text" id="email" name="email"  οnblur="validateEmail(this,'vemail')"/>
				<span id="vemail"></span>
			</div>
			<div class="field">
				<label for="phone">手机号:</label>
				<input type="text" id="phone" name="phone" οnblur="validatePhone(this,'vphone')"/>
				<span id="vphone"></span>
			</div>
			<div class="field">
				<input type="checkbox" name="agree" id="agree" /><label for="agree">已阅读<a href="">协议</a>条款，是否同意</label>
			</div>
			<div class="field">
				<input type="button" οnclick="beginSubmit()" value="注册">
				<!--<input type="submit" name="" id="" value="注册 />-->
			</div>
		</form>
		<script>
			function sub(){
				alert("准备提交");
				return false;
			}
			/*
			 表单验证的必要性:
			 1.如果表单不在前端验证，后端验证压力就会增加
			 2.提高程序运行效率，前端验证发生在客户端浏览器
			 
			 事件：
			 	onclick
			 	onscroll
			 	onfocus  获取焦点事件
			 	onblur  失去焦点事件
			*/
			
			var errorMsg = {
				require:'当前项不能为空，请填写',
				len:'长度应该是8~12之间',
				email:'邮箱格式不正确',
				phone:'手机号格式不正确',
				repass:'两次密码不一致'
			};
			
			//验证必填项
			function req(nameBox,label){
				console.info(label+'=====')
				//获取输入框中的值
				var name = nameBox.value;
				if(name.length > 0){
					nameBox.className = 'success'; //为输入框设置正确样式
					$(label).textContent='';//将验证消息置空
					return true; //为提交按钮能否正确提交提供判断依据
				}else{
					nameBox.className = 'fail';//为输入框设置错误样式
					$(label).textContent=errorMsg.require;//显示提示信息
					return false;
				}
			}
			
			//长度验证
			function len(nameBox,label){
				var name = nameBox.value;
				if(name.length >= 8 && name.length <= 12){
					nameBox.className = 'success'; //为输入框设置正确样式
					$(label).textContent='';//将验证消息置空
					return true; //为提交按钮能否正确提交提供判断依据
				}else{
					nameBox.className = 'fail';//为输入框设置错误样式
					$(label).textContent=errorMsg.len;//显示提示信息
					return false;
				}
			}
			
			//手机号验证
			function validatePhone(nameBox,label){
				//先做必填验证
				var result = req(nameBox,label);
				if(result){
					//判断格式
					if(/^1[3578]\d{9}$/.test(nameBox.value)){
						nameBox.className = 'success'; //为输入框设置正确样式
						$(label).textContent='';//将验证消息置空
						result = true;
					}else{
						nameBox.className = 'fail';//为输入框设置错误样式
						$(label).textContent=errorMsg.phone;//显示提示信息
						result = false;
					}
				}
				return result;
			}
			
			//邮箱验证
			function validateEmail(nameBox,label){
				//先做必填验证
				var result = req(nameBox,label);
				if(result){
					//判断格式
					if(/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(nameBox.value)){
						nameBox.className = 'success'; //为输入框设置正确样式
						$(label).textContent='';//将验证消息置空
						result = true;
					}else{
						nameBox.className = 'fail';//为输入框设置错误样式
						$(label).textContent=errorMsg.email;//显示提示信息
						result = false;
					}
				}
				return result;
			}
			
			function validateRepass(nameBox,realpass,label){
				var repass = nameBox.value;
				var pass = realpass.value;
				if(repass == pass){
					nameBox.className = 'success'; //为输入框设置正确样式
					$(label).textContent='';//将验证消息置空
					return true;
				}else{
					nameBox.className = 'fail';//为输入框设置错误样式
					$(label).textContent=errorMsg.repass;//显示提示信息
					return false;
				}
			}
			
			function beginSubmit(){
				var f1 = req($('username'),'vname');
				var f2 = len($('password'),'vpass');
				var f3 = validateRepass($('repassword'),$('password'),'vrepass');
				var f4 = validateEmail($('email'),'vemail');
				var f5 = validatePhone($('phone'),'vphone');
				var f6 = $('agree').checked;
				if(!f6){
					alert('必须同意协议条款!');
					return false;
				}
				if(f6 && f1 && f2 && f3 && f4 && f5){
					//提交表单
					$('f1').submit();
				}
			}
			
			function $(id)
			{
				return document.getElementById(id);
			}
		</script>
	</body>
</html>