<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.loginForm span{
color: red;
display: none;
}
</style>
</head>
<body>
<!--
1. 用户名的不能为空, 并且长度要为4~6之间(js的String类型有 length属性).
2. 密码不能为空.
3. 重复密码要和密码相同。
-->
<form class="loginForm">
用户名 :<input type="text" autocomplete="off" name="username" id="username">
<span id="usernameIsNull">用户名不能为空</span>
<span id="usernameLengthError">用户名长度要为4~6之间</span><br>
密码 :<input type="password" name="password" id="password">
<span id="passwordIsNull">密码不能为空</span><br>
验证密码:<input type="password" name="repassword" id="repassword">
<span id="passwordNotSame">密码不一致</span><br>
</form>
</body>
<script>
var username = document.getElementById('username');//用户名
var usernameIsNull = document.getElementById('usernameIsNull');//用户名为空提示框
var usernameLengthError = document.getElementById('usernameLengthError');//用户名长度不为4-6提示框
var password = document.getElementById('password');//密码
var passwordIsNull = document.getElementById('passwordIsNull');//密码为空提示框
var repassword = document.getElementById('repassword');//验证密码
var passwordNotSame = document.getElementById('passwordNotSame');//密码与验证密码不一致提示框
//用户名的验证
var usernameValue;//保存用户名输入框中的值
username.onfocus = function () {
usernameIsNull.style.display = 'none';//让提示框隐藏
usernameLengthError.style.display = 'none';
}
username.onblur =function () {
usernameValue = username.value;
//判断用户名是否为空
if(usernameValue == ''){
usernameIsNull.style.display = 'inline-block';
}
//判断用户名长度是否在4-6之间
if(usernameValue.length < 4 || usernameValue.length > 6){
usernameLengthError.style.display = 'inline-block';
}
}
//密码的验证
var passwordValue;//保存密码输入框中的值
password.onfocus = function () {
passwordIsNull.style.display = 'none';
}
password.onblur =function () {
passwordValue = password.value;
//判断密码是否为空
if (passwordValue == '') {
passwordIsNull.style.display = 'inline-block';
}
}
//验证密码是否与密码一致
var repasswordValue;//保存验证密码输入框中的值
repassword.onfocus = function () {
passwordNotSame.style.display = 'none';
}
repassword.onblur =function () {
repasswordValue = repassword.value;
//判断验证密码是否与密码一致
if (repasswordValue != passwordValue) {
passwordNotSame.style.display = 'inline-block';
}
}
</script>
</html>
效果图