制作一个登录页面，运用正则表达式编写校验功能：要求输入的用户名和密码不能为空，用户名8位以上的字母组成，密码6位数字。

最新推荐文章于 2024-03-04 09:55:48 发布

原创

最新推荐文章于 2024-03-04 09:55:48 发布 · 4.3k 阅读

59 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript #前端

该博客展示了如何使用正则表达式在HTML登录页面中实现用户输入的用户名和密码验证。要求用户名由8位以上字母组成，密码为6位数字。当用户点击登录按钮时，JavaScript函数会检查输入是否符合规定，若不符合则给出相应提示。

制作一个登录页面，运用正则表达式编写校验功能：要求输入的用户名和密码不能为空，用户名8位以上的字母组成，密码6位数字。

代码展示：

<!doctype html>
<html lang="en">
 <head>
	<title>Document</title>
	<script>
		function loginOnclick(){
			var username=document.getElementById("username").value;
			var password=document.getElementById("password").value;
			if (username=="" || password==""){
				alert("用户名和密码不能为空");
				return;
			}
			var reg=/^[a-zA-Z]{8,}$/;
			if (!reg.test(username)){
				alert("用户名必须为8位以上的字母组成！");
				return;
			}
			reg=/^\d{6}$/;
			if (!reg.test(password)){
				alert("密码请输入6位数字！");
				return;
			}
			alert("登录成功！");
		}
	</script>
 </head>
 <body>
	用户名：<input type="text" id="username"><br>
	密  码：<input type="password" id="password"><br>
	<input type="button" value="登录" onclick="loginOnclick();">
 </body>
</html>

运行结果：&nbs