实现目标：

        当表单用户名、密码等各项内容符合格式时，表单提交成功，否则表单验证不通过，提交失败。废话不多说，上码，效果图最后。

js代码：

function checkUname() {
	var uname = document.getElementById("uname").value;
	var reg = /^[\u4e00-\u9fa5]{2,4}$/
	var unameSpan = document.getElementById("unameSpan");
	if (uname == "" || uname == null) {
		unameSpan.innerHTML = "*用户名不能为空";
		unameSpan.style.color = "red";
		return false;
	} else if (reg.test(uname)) {
		unameSpan.innerHTML = "*用户名通过";
		unameSpan.style.color = "green";
		return true;
	} else {
		unameSpan.innerHTML = "*用户名格式不符"
		unameSpan.style.color = "red";
		return false;
	}

}
function checkPwd() {
	var upwd = document.getElementById("pwd").value;
	var reg = /^[a-z]\w{5,7}$/;
	var span = document.getElementById("pwdSpan");
	if (span == "" || span == null) {
		span.innerHTML = "*密码不能为空";
		span.style.color = "red";
		return false;
	} else if (reg.test(upwd)) {
		span.innerHTML = "*密码通过";
		span.style.color = "green";
		return true;
	} else {
		span.innerHTML = "*密码格式不符"
		span.style.color = "red";
		return false;
	}
	checkPwd2();
}
function checkPwd2() {
	var pwd = document.getElementById("pwd").value;
	var pwd2 = document.getElementById("pwd2").value;
	var span = document.getElementById("pwd2Span");
	if (pwd2 == "" || pwd2 == null) {
		span.innerHTML = "*密码不能为空";
		span.style.color = "red";
		return false;
	} else if (pwd === pwd2) {
		span.innerHTML = "*密码通过";
		span.style.color = "green";
		return true;
	} else {
		span.innerHTML = "*密码不同，请重新输入"
		span.style.color = "redredred";
		return false;
	}
}
function checkbir_date() {
	var sel = document.getElementById("bir_date").value;
	var span = document.getElementById("bir_dateSpan");
	if (sel != 0) {
		span.innerHTML = "出生日期选择成功";
		span.style.color = "green";
		return true;
	} else {
		span.innerHTML = "请选择出生日期";
		span.style.color = "redred";
		return false;
	}
}
function checkLike() {
	var Likes = document.getElementsByName("Like");
	var span = document.getElementById("LikeSpan");
	for (var i = 0; i < Likes.length; i++) {
		if (Likes[i].checked) {
			span.innerHTML = "*爱好通过";
			span.style.color = "green";
			return true;
		}
	}
	span.innerHTML = "*爱好至少选择一项";
	span.style.color = "red";
	return false;
}
function checkAll() {
	checkUname();
	checkPwd();
	checkPwd2();
	checkLike()
	return checkUname() && checkPwd() && checkPwd2() && checkLike();
}

html代码：

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="student.css">
		<script type="text/javascript" src="student.js"></script>
	</head>
	<body>
		<form action="http://www.4399.com" method="post" onsubmit="return checkAll();">
			<h1>学生课绩管理系统</h1>
			<table border="1">
				<tr>
					<td class="td-right">用户选择</td>
					<td>
						<input type="radio" name="radio">学生
						<input type="radio" name="radio">教师
						<input type="radio" name="radio">管理员
					</td>
				</tr>
				<tr>
					<td class="td-right">用户名</td>
					<td>
						<input type="text" name="uname" id="uname" onblur="checkUname()">
						<span id="unameSpan">请输入2-4位汉字</span>
					</td>
				</tr>
				<tr>
					<td class="td-right">密码</td>
					<td>
						<input type="password" name="pwd" id="pwd" onblur="checkPwd()">
						<span id="pwdSpan">要求6-8位密码，首位必须为字母</span>
					</td>
				</tr>
				<tr>
					<td class="td-right">重新输入密码</td>
					<td>
						<input type="password" name="pwd2" id="pwd2" value="" " onblur=" checkPwd2()">
						<span id="pwd2Span"></span>
					</td>
				</tr>
				<tr>
					<td class="td-right">出生日期</td>
					<td>
						<select name="bir_date" id="bir_date" onchange="checkbir_date()">
							<option value="0" selected="selected">-请选择-</option>
							<option value="1">2000</option>
							<option value="2">2001</option>
							<option value="3">2002</option>
							<option value="4">2003</option>
							<option value="5">2004</option>
						</select>年
						<span id="bir_dateSpan"></span>
					</td>
				</tr>
				<tr>
					<td class="td-right">兴趣</td>
					<td>
						<input type="checkbox" name="Like" id="Like" onclick="checkLike()">音乐
						<input type="checkbox" name="Like" id="Like" onclick="checkLike()">动漫
						<input type="checkbox" name="Like" id="Like" onclick="checkLike()">电影
						<span id="LikeSpan"></span>
					</td>
				</tr>
				<tr>
					<td class="td-right">我的简介</td>
					<td>
						<textarea cols="30" rows="12"></textarea>
					</td>
				</tr>
				<tr>
					<td class="td-button" colspan="2">
						<input type="submit" value="注册">
						<input type="button" value="取消">
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

 css代码：

table {
	width: 800px;
	height: 400px;
	background-color: #d0d0d0;
}

form{
	width: 800px;
	height: 500px;
	background-color: #ffffff;
	margin: 100px auto 0;
	font-weight: bold;
}

h1{
	font-size: 50px;
	font-family:  STSong;
	color: blue;
	text-align: center;
}
td{
	width: 90px;
}

.td-right {
	text-align: right;
}

.td-button {
	text-align: center;
}

效果图：

1.验证未通过，提交失败

fcebff12ea034b0d8332234ad1b0c174.png 

2.验证通过

664810d293a24d78be3c7467a8064562.png 

 

 

 

 

# javascript # java # html # 前端
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

详解GaussDB(DWS)中的行执行引擎

avatar 华为云开发者联盟
cover

第六届·2024 MindSpore 量子计算黑客松热身赛赛题解读

avatar 华为云开发者联盟
cover

带你熟悉CCE集群增强型CPU管理策略enhanced-static

avatar 华为云开发者联盟