利用javaScript实现前端表单验证

最新推荐文章于 2022-02-13 14:01:49 发布

SnakeMoving

最新推荐文章于 2022-02-13 14:01:49 发布

阅读量3.1k

点赞数 1

分类专栏： WEB

本文链接：https://blog.csdn.net/snakeMoving/article/details/53046427

版权

WEB 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

有什么可以交流的地方请留言，谢谢了

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>学友分享网-注册个人资料</title>
	<link rel="stylesheet" href="css/index.css">
	<script text="text/javaScript" src="js/index.js"></script>
	<script text="text/javaScript" src="js/util.js"></script>
</head>
<body>
	<div class="main">
		<h1>注册 成为学友分享网的会员</h1>
		<form action="success.html" method="post" id="registerForm">
			<table>
				<tr>
					<td>账号：</td>
					<td><input type="text" name="username" id ="username" ></td>
					<td><span id="usernameTip"></span></td>
				</tr>
				<tr>
					<td>密码：</td>
					<td><input type="password" name="password" id="password"></td>
					<td><span id="passwordTip"></span></td>
				</tr>
				<tr>
					<td>确认密码：</td>
					<td><input type="password" id="password2"></td>
					<td><span id="password2Tip"></span></td>
				</tr>
				<tr>
					<td>邮箱：<button id="sendMail">发送邮件</button></td>
					<td><input type="text" name="mail" id="mail"></td>
					<td><span id="mailTip"></span></td>
				</tr>
				<tr>
					<td><button>注册</button></td>
					<td><button type="reset">重置</button></td>
				</tr>
			</table>
		</form>
	</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<p>表单验证通过</p>
</body>
</html>


window.onload = function(){
	username =  document.getElementById("username");
	password = document.getElementById("password");
	password2 = document.getElementById("password2");
	email = document.getElementById("mail");
	registerForm = document.getElementById("registerForm");

	username.addEventListener("blur",function(){
		validateUsername();
	password.addEventListener("blur",function(){
		validatePassword();
	},false);
	password2.addEventListener("blur",function(){		
		validatePassword2();
		isSame(password,password2);
	},false);
	email.addEventListener("blur",function(){
		validateMail();
	},false);
	registerForm.addEventListener("submit",function(e){
		if(validateUsername()&&validatePassword()&&validatePassword2()&&validateMail()
			&&isSame(password,password2)){
			this.submit();
		}else{
			preventIE(e);
		}
	},false);
})}

//判断表单是否为空，并且是否符合正则表达式
//直接通过名字得到元素
function getElementByMyMethod(name){
	return document.getElementById(name);
}
function validateUsername(){
	username = getElementByMyMethod("username");
	return isEmptyAndReg(username,/([a-z]|[A-Z])\w{5,12}/);
}
function validatePassword(){
	password = getElementByMyMethod("password");
	return isEmptyAndReg(password,/\S{6,12}/);
}
function validatePassword2(){
	password2 = getElementByMyMethod("password2");
	return isEmptyAndReg(password2,/\S{6,12}/);
}
function validateMail(){
	email = getElementByMyMethod("mail");
	return isEmptyAndReg(email,/\w+@\w+\.\w+/);
}
function isEmptyAndReg(obj,Reg){
	spanName =  obj.id + "Tip";
	if(obj.value == ""){		
		setTipFailure(spanName);
		return false;
	}else if(Reg.test(obj.value)){
		setTipSuccess(spanName);
		return true;
	}else{
		setTipFailure(spanName);
		return false;
	}
}
//判断2个密码是否相同
function isSame(obj1,obj2){
	if(obj1.value == obj2.value)
		return true;
	else{
		setIsNoSame();
		return false;
	}
}

//设置相应的提示信息
function setIsNoSame(){
	//obj是相应span的变量
	objSpan = document.getElementById("password2Tip");
	objSpan.innerText="两次密码不相同";
}
//设置相应的提示信息
function setTipSuccess(objName){
	objSpan = document.getElementById(objName);
	objSpan.innerHTML="<font color='green'>√</font>";
}

//设置相应的提示信息
function setTipFailure(objName){
	objSpan = document.getElementById(objName);
	objSpan.innerHTML="<font color='red'>×</font>";
}
//阻止浏览器行为动作
function preventIE(e){
	if(e && e.preventDefault){//现在是W3C标准
			e.preventDefault();//阻止浏览器的动作
		}else{
			window.event.returnValue = false;//专门针对IE浏览器的处理
		}
}