<!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>
效果圖
