【实例】javascript表单验证的例子

最新推荐文章于 2021-10-01 21:41:19 发布

_Slience_

最新推荐文章于 2021-10-01 21:41:19 发布

阅读量1.7w

点赞数

分类专栏： Web前端文章标签： javascript

本文链接：https://blog.csdn.net/u010513756/article/details/39455777

版权

Web前端专栏收录该内容

94 篇文章 1 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">

</style>

<script type="text/javascript">

var password = null;//用来第二次验证密码的

//检查用户名
function checkUser(userNode) {
	var name = userNode.value;
	 
	var namereg = /^[a-z]{5}$/i;	
		//意为：忽略大小写，从开始到结尾都是英文字符，其字符长度为5
		//最后那个“i”意思是忽略大小写
	
	//if判断要注意显示了成功（或失败），就要把失败（或成功）给隐藏起来
	if(name.match(namereg)) {
		document.getElementById("useryes").style.display="inline";
		document.getElementById("userno").style.display="none";
		return true;
		
	} else {
		document.getElementById("userno").style.display="inline";
		document.getElementById("useryes").style.display="none";
		return false;
	}
}

//检查密码
function checkPsw(pswNode) {
	
	var pass = pswNode.value;
	
	var passreg = /^\d{5}$/;
		//意为5个数字
	if(pass.match(passreg)) {
		document.getElementById("pswspan").innerHTML = "rigth!".fontcolor("green");
		password = pass;	//记得把password存起来以便后面的再次输入密码的时候验证之用
		return true;
	} else {
		document.getElementById("pswspan").innerHTML = "error!".fontcolor("red");
		return false;
	}
	
}

//再次验证密码
function checkRePsw(repswNode) {


	if(repswNode.value == password) {
		document.getElementById("repswspan").innerHTML = "rigth!".fontcolor("green");
		return true;
	} else {
		document.getElementById("repswspan").innerHTML = "error!".fontcolor("red");
		return false;
	}
}

function checkMail(mailNode) {
	var mail = mailNode.value;
	
	var regMail = /^\w+@\w+(\.\w+)+$/;
		//这个是匹配邮箱的正则（感觉不完善）
	var mailSpan = document.getElementById("mailspan");
	if(regMail.test(mail)) {
		mailSpan.innerHTML = "邮箱正确".fontcolor("green");
		return true;
	} else {
		mailSpan.innerHTML = "邮箱错误".fontcolor("red");
		return false;
	}
}

//要注意这种情况：在表单都填对了的时候，
//这时那个人有改了一点东西，有变成不正确的表单了，但是他没有将输入的光标移动，
//触发不了onBlur事件，这个时候我们是希望按钮不可用的，但是由于没有改变
//他还是可以把表单提交出去
function checkSubmit() {

	var form = document.forms[0];	//获取到form

	if(checkUser(form.user) && checkPsw(form.psw) && checkRePsw(form.repsw)
	&& checkMail(form.mail)) {
		
		return true;
	} else {
		alert("注册错误");
		return false;
	}
}
</script>
</head>

<body>
<form action="http://www.baidu.com" onSubmit="return checkSubmit()">
用户名称：<input type="text" name="user" onBlur="checkUser(this)">
<span id="useryes" style="color:green; display:none">正确</span>
<span id="userno" style="color:red; display:none">错误</span>
<br>
输入密码：<input type="text" name="psw" onBlur="checkPsw(this)">
<span id="pswspan"></span><br>
确认密码：<input type="text" name="repsw" onBlur="checkRePsw(this)">
<span id="repswspan"></span>
<br>
邮箱地址：<input type="text" name="mail" onBlur="checkMail(this)">
<span id="mailspan"></span>
<br>
<input type="submit" value="提交内容">
</form>
</body>
</html>