Web开发基础-JavaScript-09_web开发基础第九章自测-优快云博客

本文链接：https://blog.youkuaiyun.com/Coder_Boy_/article/details/81022945

本文介绍了一个登录页面的格式验证案例，通过JavaScript实现对账号和密码的格式检查，并使用正则表达式来确保输入符合特定规则。同时探讨了onsubmit与onclick事件在表单验证中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用内置对象编写登录时格式校验的练习

案例思路：

练习的案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>登录页面</title>
		<style type="text/css">
			.ok {
				color:green;
				border:1px solid green;
			}
			
			.error {
				color:red;
				border:1px solid red;
			}
		</style>
		<script type="text/javascript">
			function checkCode(){
				
				//获取账号
				var code = document.getElementById("code").value;
				//验证其格式
				var span = document.getElementById("code_msg");
				//[\w]匹配包括下划线的任何单词字符,等价于“[A-Za-z0-9_]”
				//{8,16}表示匹配8-16次
				//$表示匹配输入字符串的结束位置
				//^表示字符串开始位置
				//所以表示：匹配包括下划线的8-16个单词字符的字符串
				var reg = /^\w{6,12}$/;
				if(reg.test(code)){
					//格式正确
					span.className = "ok";
					return true;
				}else{
					//格式错误
					span.className = "error";
					return false;
				}
			}
			
			function checkPwd(){
				
				var pwd = document.getElementById("pwd").value;
				var span = document.getElementById("pwd_msg");
				var reg = /^\w{8,20}$/;
				
				if(reg.test(pwd)){
					span.className = "ok";
					return true;
				}else{
					span.className = "error";
					return false;
				}
			}
		
		</script>
	</head>
	<body>
		<form action="https://blog.youkuaiyun.com/coder_boy_/article/month/2018/07"
			οnsubmit="return checkCode()+checkPwd()==2;">
			<p>
				账户：
				<input type="text" id="code"
					οnblur="checkCode();">
				<span id="code_msg">6-12位字母、数字、下划线</span>
			</p>
			<p>
				密码：
				<input type="password" id="pwd"
					οnblur="checkPwd();"/>
				<span id="pwd_msg">8-20位字母、数字、下划线</span>
			</p> 
			<p>
				<input type="submit" value="登录" >
			</p>
		</form>
		
	</body>
</html>

最新页面显示效果：

A.不输入提示效果

B.录入格式有误提示效果

C.录入格式正确提示效果

总结：对应录入格式有误的A、B都是无法提交的，只有账户与密码格式都对时才能成功提交表单数据。

将表单修改为下面，将提交事件放在提交按钮的一个点击事件上也是等同上面的【写在form标签上的onsubmit事件】

<form action="https://blog.youkuaiyun.com/coder_boy_/article/month/2018/07"
			>
			<p>
				账户：
				<input type="text" id="code"
					οnblur="checkCode();">
				<span id="code_msg">6-12位字母、数字、下划线</span>
			</p>
			<p>
				密码：
				<input type="password" id="pwd"
					οnblur="checkPwd();"/>
				<span id="pwd_msg">8-20位字母、数字、下划线</span>
			</p> 
			<p>
				<input type="submit" value="登录" οnclick="return checkCode()+checkPwd()==2;">
			</p>
		</form>

知识拓展：form表单提交onclick和onsubmit

onsubmit只能表单上使用,提交表单前会触发, onclick是按钮等控件使用, 用来触发点击事件。

在提交表单前，一般都会进行数据验证，可以选择在submit按钮上的onclick中验证,也可以在onsubmit中验证。

但是onclick比onsubmit更早的被触发。form的onsubmit中验证表单的方式使用的比较多。

onsubmit处理函数返回false，onclick函数返回false，都不会引起表单提交。

演示案例:只需修改上面案例代码即可【修改提交按钮事件与form标签的提交事件】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>登录页面</title>
		<style type="text/css">
			.ok {
				color:green;
				border:1px solid green;
			}
			
			.error {
				color:red;
				border:1px solid red;
			}
		</style>
		<script type="text/javascript">
			function checkCode(){
				
				//获取账号
				var code = document.getElementById("code").value;
				//验证其格式
				var span = document.getElementById("code_msg");
				//[\w]匹配包括下划线的任何单词字符,等价于“[A-Za-z0-9_]”
				//{8,16}表示匹配8-16次
				//$表示匹配输入字符串的结束位置
				//^表示字符串开始位置
				//所以表示：匹配包括下划线的8-16个单词字符的字符串
				var reg = /^\w{6,12}$/;
				if(reg.test(code)){
					//格式正确
					span.className = "ok";
					return true;
				}else{
					//格式错误
					span.className = "error";
					return false;
				}
			}
			
			function checkPwd(){
				
				var pwd = document.getElementById("pwd").value;
				var span = document.getElementById("pwd_msg");
				var reg = /^\w{8,20}$/;
				
				if(reg.test(pwd)){
					span.className = "ok";
					return true;
				}else{
					span.className = "error";
					return false;
				}
			}
		
		</script>
	</head>
	<body>
		<form action="https://blog.youkuaiyun.com/coder_boy_/article/month/2018/07"
			οnsubmit="alert(1);">
			<p>
				账户：
				<input type="text" id="code"
					οnblur="checkCode();">
				<span id="code_msg">6-12位字母、数字、下划线</span>
			</p>
			<p>
				密码：
				<input type="password" id="pwd"
					οnblur="checkPwd();"/>
				<span id="pwd_msg">8-20位字母、数字、下划线</span>
			</p> 
			<p>
				<input type="submit" value="登录" οnclick="alert(2);">
			</p>
		</form>
		
	</body>
</html>

最终页面显示效果：当点击登录提交按钮后，页面依次显示效果如下