注册表单验证,提交时统一验证。验证不通过时在后面以红色的文字显示出提示信息。(考点:提交事件、属性操作、事件处理函数返回值)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
form {
width: 400px;
height: 400px;
background: pink;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
input {
height: 40px;
border: none;
outline: none;
}
span{
width: 100px;
height: 100%;
margin-left: 10px;
display: inline-block;
}
</style>
</head>
<body>
<form>
<h1>验证</h1>
<p>用户名:<input type="text" class="user"><span></span></p>
<p>密 码:<input type="password" class="pwd"><span></span></p>
<p>手机号:<input type="tel" class="tel"><span></span></p>
<input type="submit" class="btn">
</form>
<script>
let btn = document.querySelector(".btn");
let user = document.querySelector(".user");
let pwd = document.querySelector(".pwd");
let tel = document.querySelector(".tel");
let form = document.querySelector("form");
form.addEventListener("submit", function (e) {
// 用户名在2-5之间
if (user.value.length >= 2 && user.value.length <= 5) {//合法
user.nextElementSibling.style.color = "green"
user.nextElementSibling.textContent = "用户名合法"
} else {
user.nextElementSibling.style.color = "red"
user.nextElementSibling.textContent = "用户名在2~5"
}
// 密码大于6
if (pwd.value.length > 6) {//合法
pwd.nextElementSibling.style.color = "green"
pwd.nextElementSibling.textContent = "密码合法"
} else {
pwd.nextElementSibling.style.color = "red"
pwd.nextElementSibling.textContent = "密码大于6"
}
// 电话号码11
if (tel.value.length == 11) {//合法
tel.nextElementSibling.style.color = "green"
tel.nextElementSibling.textContent = "密码合法"
} else {
tel.nextElementSibling.style.color = "red"
tel.nextElementSibling.textContent = "电话号码11位"
}
e.preventDefault();
})
</script>
</body>
</html>