需求

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form id="reg-form" action="#" method="post">
        用户名：<input type="text" name="username" id="username"><br>
        <span id="username_err" class="err_msg" style="display: none">用户名输入有误</span><br>
          密码：<input type="password" name="password" id="password"><br>
        <span id="password_err" class="err_msg" style="display: none">密码输入有误</span><br>
        <input type="submit">
 
    </form>
 
    <script>
        // 1. 验证用户名是否符合规则
        // 1.1 获取用户名的输入框
        var usernameInput = document.getElementById("username");
 
        // 1.2 绑定onblur事件  失去焦点
        usernameInput.onblur = checkUsername;
 
        function checkUsername(){
            // 1.3 获取用户输入的用户名
            var username = usernameInput.value.trim(); //去除空格
 
            var flag1 = username.length >= 6 && username.length <= 12;
            // 1.4 判断用户名是否符合规则，长度6-12
            if(flag1){
                document.getElementById("username_err").style.display = "none";
            }else{
                document.getElementById("username_err").style.display = "";
            }
            return flag1;
        }
 
        // 1. 验证密码是否符合规则
        // 1.1 获取密码的输入框
        var passwordInput = document.getElementById("password");
 
        // 1.2 绑定onblur事件  失去焦点
        passwordInput.onblur = checkPassword;
            function checkPassword(){
            // 1.3 获取用户输入的密码
            var password = passwordInput.value.trim(); //去除空格
            var flag2 = password.length >= 6 && password.length <= 12;
            // 1.4 判断密码是否符合规则，长度6-12
            if(flag2){
                document.getElementById("password_err").style.display = "none";
            }else{
                document.getElementById("password_err").style.display = "";
            }
            return flag2;
        }
 
        // 提交验证
        // 1. 获取表单对象
        var regForm = document.getElementById("reg-form");
 
        // 2. 绑定 onsubmit 事件
        regForm.onsubmit = function (){
            // 挨个判断每一个表单项是否都符合要求，如果有一个不符合，则返回false
            return  checkPassword() && checkUsername();
        }
 
    </script>
</body>
</html>

posted @ 2022-09-29 15:03 风陵南阅读(65) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· SQL注入演示

· 小案例——用户登录、用户注册

· JavaScript案例--表单验证

· js表单验证

· DOM-用户名表单验证

阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 记一次.NET内存居高不下排查解决与启示

公告

2750天1小时1分8秒

昵称：风陵南
园龄： 3年1个月
粉丝： 3
关注： 4

+加关注

2025年3月

日

一

二

三

四

五

六

JavaScript——案例-表单验证

风陵南

JavaScript——案例-表单验证

需求

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	</head>
	<body>
	<form id="reg-form" action="#" method="post">
	用户名：<input type="text" name="username" id="username"><br>
	<span id="username_err" class="err_msg" style="display: none">用户名输入有误</span><br>
	密码：<input type="password" name="password" id="password"><br>
	<span id="password_err" class="err_msg" style="display: none">密码输入有误</span><br>
	<input type="submit">

	</form>

	<script>
	// 1. 验证用户名是否符合规则
	// 1.1 获取用户名的输入框
	var usernameInput = document.getElementById("username");

	// 1.2 绑定onblur事件失去焦点
	usernameInput.onblur = checkUsername;

	function checkUsername(){
	// 1.3 获取用户输入的用户名
	var username = usernameInput.value.trim(); //去除空格

	var flag1 = username.length >= 6 && username.length <= 12;
	// 1.4 判断用户名是否符合规则，长度6-12
	if(flag1){
	document.getElementById("username_err").style.display = "none";
	}else{
	document.getElementById("username_err").style.display = "";
	}
	return flag1;
	}

	// 1. 验证密码是否符合规则
	// 1.1 获取密码的输入框
	var passwordInput = document.getElementById("password");

	// 1.2 绑定onblur事件失去焦点
	passwordInput.onblur = checkPassword;
	function checkPassword(){
	// 1.3 获取用户输入的密码
	var password = passwordInput.value.trim(); //去除空格
	var flag2 = password.length >= 6 && password.length <= 12;
	// 1.4 判断密码是否符合规则，长度6-12
	if(flag2){
	document.getElementById("password_err").style.display = "none";
	}else{
	document.getElementById("password_err").style.display = "";
	}
	return flag2;
	}

	// 提交验证
	// 1. 获取表单对象
	var regForm = document.getElementById("reg-form");

	// 2. 绑定 onsubmit 事件
	regForm.onsubmit = function (){
	// 挨个判断每一个表单项是否都符合要求，如果有一个不符合，则返回false
	return checkPassword() && checkUsername();
	}

	</script>
	</body>
	</html>