js实现的表单验证

最新推荐文章于 2024-04-20 14:59:10 发布

ZZqieqie

最新推荐文章于 2024-04-20 14:59:10 发布

阅读量863

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/xw370457549/article/details/8113387

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

简单的表单验证

表单验证.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单验证</title>
<script language="javascript" src="checkData.js">
</script>

</head>

<body>
<center><font size="5" color="#0066FF">注册</font></center>
<div align="center">
<form action="success.html" method="post" name="form" οnsubmit="return checkData()">
<table width="50%" border="1">
	<tr>
    	<td align="right" width="100px">用户名</td>
        <td align="left"><input type="text" name="username"  width="20" οnfοcus="usnrule()" οnblur="checkUserName(this.value)"/>
        	<span id="usernameErr"></span>
        </td>
    </tr>
    <tr>
    	<td align="right">密码</td>
        <td align="left"><input name="password" type="password" size="20" οnfοcus="pwrule()" οnblur="checkPassWord(this.value)"/>
        	<span id="passwordErr"></span>
        </td>
    </tr>
    <tr>
    	<td align="right"> 重复密码</td>
        <td align="left"><input name="repassword" type="password" size="20" οnfοcus="repwrule()" οnblur="checkRePW(this.value)"/>
        	<span id="repasswordErr"></span>
        </td>
    </tr>
    <tr>
    	<td>  </td>
        <td align="left"><input type="submit" value="提交" />     <input type="reset" value="重置" /></td>
    </tr>
</form>
</div>
</body>
</html>

checkData.js

// JavaScript Document

function checkData() {
	var usn = document.form.username.value;
	if(!checkUserName(usn)) {                    	//检查用户名是否符合
		return false;
	}
	
	var pw = document.form.password.value;
	if(!checkPassWord(pw)) {			//检查密码长度以及强度
		return false;
	}
	
	var repw = document.form.repassword.value;
	if(!checkRePW(repw)) {			//检查两次输入的密码是否一致
		return false;
	}
	
	return true;				//如果输入无误，则提交
	
}

function usnrule() {
	document.getElementById("usernameErr").innerHTML = "<font color='black' size='2'>请输入4-16位的用户名</font>";
}

function checkUserName(username) {
	if(username.length <3 || username.length >16) {
		document.getElementById("usernameErr").innerHTML = "<font color='red' size='2'>用户名不符合规定，请重新输入！</font>";
		return false;
	} else {
		document.getElementById("usernameErr").innerHTML = "<font color='green' size='2'>用户名正确</font>";
		return true;
	}
}

function pwrule() {
	document.getElementById("passwordErr").innerHTML = "<font color='black' size='2'>为了保障你的账户安全，请输入4位以上的密码！</font>";
}

function checkPassWord(password) {
	if(password.length < 4) {
		document.getElementById("passwordErr").innerHTML = "<font color='red' size='2'>密码太短，请重新输入！</font>";
		return false;
	} else if(password.length > 3 && password.length < 7) {
		document.getElementById("passwordErr").innerHTML = "<font color='green' size='2'>密码强度：弱！</font>";
		return true;
	} else if(password.length > 6 && password.length < 12) {
		document.getElementById("passwordErr").innerHTML = "<font color='green' size='2'>密码强度：中</font>";
		return true;
	} else if(password.length > 11 && password.length < 17) {
		document.getElementById("passwordErr").innerHTML = "<font color='green' size='2'>密码强度：强</font>";
		return true;
	} else {
		document.getElementById("passwordErr").innerHTML = "<font color='green' size='2'>密码强度：超强</font>";
		return true;
	}
}

function repwrule() {
	document.getElementById("repasswordErr").innerHTML = "<font color='black' size='2'>请重复密码</font>";
}

function checkRePW(repassword) {
	var pw = document.form.password.value;
	if(pw != repassword) {
		document.getElementById("repasswordErr").innerHTML = "<font color='red' size='2'>密码不一致</font>";
		return false;
	} else {
		document.getElementById("repasswordErr").innerHTML = "<font color='green' size='2'>密码一致</font>";
		return true;
	}
}

运行效果：