生活随笔
收集整理的這篇文章主要介紹了
简单注册界面
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
register.html
<!DOCTYPE html>
<html lang="ch"><head><meta charset="UTF-8"><title>注冊</title><link href="register.css" rel="stylesheet">
</head><body><div class="form-container"><form id="register-form"><h1 id="registerMsg">REGISTER</h1><div class="input-group"><label for="stuId">學號:</label><input type="text" id="stuId" onblur="checkStuId()" /><span id="stuIdSpan">*開始輸入</span></div><div class="input-group"><label for="username">姓名:</label><input type="text" id="username" onblur="checkUsername()" /><span id="usernameSpan">*開始輸入</span></div><div id="select"><label for="gender">性別:</label><input type="radio" id="male" name="gender" value="男生" onclick="checkGender()" checked><label for="male">男</label><input type="radio" id="female" name="gender" value="女生" onclick="checkGender()"><label for="female">女</label><span id="genderSpan">*男生</span></div><div class="input-group"><label for="password">密碼:</label><input type="password" id="password" onblur="checkPassword()" /><span id="passwordSpan">*開始輸入</span></div><div class="input-group"><label for="confirm-password">確認密碼:</label><input type="password" id="confirm-password" onblur="checkConfirmPassword()" /><spanid="confirm-passwordSpan">*開始輸入</span></div><div class="input-group"><label for="email">郵箱:</label><input type="email" id="email" onblur="checkMail()" /><span id="emailSpan">*開始輸入</span></div><div id="subDiv"><input type="submit" value="注冊" class="btn"><input type="reset" value="重置" class="btn"></div><div class="error"></div><div class="success"></div></form></div><script src="register.js"></script>
</body></html>
register.css
* {margin: 0;padding: 0;
}html {height: 100%;width: 100%;overflow: hidden;margin: 0;padding: 0;background-image: url(Desert.jpg);background-repeat: no-repeat;background-size: 100% 100%;-moz-background-size: 100% 100%;
}body {display: flex;align-items: center;justify-content: center;height: 100%;
}.form-container {width: 400px;padding: 20px;margin: auto;background-color: rgba(75, 81, 95, 0.3);border-radius: 5px;
}.input-group {text-align: right;margin-top: 33px;margin-bottom: 33px;margin-right: 40px;
}.input-group label {color: azure;margin-bottom: 5px;font-weight: lighter;padding: 25px;margin-bottom: 10px;
}.input-group input {width: 150px;padding: 8px;border: 1px solid #ccc;border-radius: 5px;box-sizing: border-box;background-color: rgba(216, 191, 216, 0.5);
}#select {margin-left: 53px;
}#select label {color: azure;margin-bottom: 5px;font-weight: lighter;padding: 10px;margin-bottom: 10px;
}#select input {margin-left: 30px;
}.btn {border-color: cornsilk;background-color: rgba(100, 149, 237, .7);color: aliceblue;border-style: hidden;border-radius: 5px;width: 100px;height: 31px;font-size: 16px;margin-right: 20px;
}#subDiv {text-align: center;margin-top: 20px;
}.error {color: red;margin-top: 20px;text-align: center;
}.success {color: green;margin-top: 20px;text-align: center;
}#registerMsg {margin-top: 0;text-align: center;color: aliceblue;
}#stuIdSpan {color: rgb(6, 152, 250);margin-left: 10px;
}#usernameSpan {color: rgb(6, 152, 250);margin-left: 10px;
}#genderSpan {color: rgb(11, 240, 72);margin-left: 0px;
}#passwordSpan {color: rgb(6, 152, 250);margin-left: 10px;
}#confirm-passwordSpan {color: rgb(6, 152, 250);margin-left: 10px;
}#emailSpan {color: rgb(6, 152, 250);margin-left: 10px;
}
register.js
// 檢查學號是否輸入正確
function checkStuId() {var stuId = document.getElementById("stuId").value; //獲取輸入的學號var reg = /^[0-9]{6,}$/ //只能輸入0-9數字且至少輸入6位的正則表達式var span = document.getElementById("stuIdSpan"); //獲取頁面顯示的驗證信息//輸入內容和正則表達式匹配，顯示輸入正確，并把信息顏色變成綠色if (reg.test(stuId)) {span.innerHTML = "*輸入正確";span.style.color = "rgb(11, 240, 72)";return true;} else {//輸入內容和正則表達式不匹配，顯示輸入錯誤，并把信息顏色變成紅色span.innerHTML = "*輸入錯誤";span.style.color = "rgb(250, 6, 14)";return false;}
}// 檢查姓名是否輸入正確
function checkUsername() {var username = document.getElementById("username").value; //獲取輸入的姓名var span = document.getElementById("usernameSpan"); //獲取頁面顯示的驗證信息//如果輸入為空，顯示輸入錯誤，并把信息顏色變成紅色if (username === "" || username === null) {span.innerHTML = "*輸入錯誤";span.style.color = "rgb(250, 6, 14)";return false;} else {span.innerHTML = "*輸入正確";span.style.color = "rgb(11, 240, 72)";return true;}
}function checkGender() {var span = document.getElementById("genderSpan");var gender = document.getElementsByName("gender");for(var i = 0; i < gender.length; i++){if(gender[i].checked){span.innerHTML = "*" + gender[i].value;}}
}// 檢查密碼是否輸入正確
function checkPassword() {var password = document.getElementById("password").value; //獲取輸入的密碼var reg = /^[0-9]{6,}$/ //只能輸入0-9數字且至少輸入6位的正則表達式var span = document.getElementById("passwordSpan"); //獲取頁面顯示的驗證信息//輸入內容和正則表達式匹配，顯示輸入正確，并把信息顏色變成綠色if (reg.test(password)) {span.innerHTML = "*輸入正確";span.style.color = "rgb(11, 240, 72)";return true;} else {//輸入內容和正則表達式不匹配，顯示輸入錯誤，并把信息顏色變成紅色span.innerHTML = "*輸入錯誤";span.style.color = "rgb(250, 6, 14)";return false;}
}// 檢查兩次密碼是否一致
function checkConfirmPassword() {var password = document.getElementById("password").value; //獲取輸入的密碼var confirmPassword = document.getElementById("confirm-password").value; //獲取再次輸入密碼var span = document.getElementById("confirm-passwordSpan"); //獲取頁面顯示的驗證信息//兩次密碼一致顯示輸入正確if (confirmPassword != "" && confirmPassword != null && confirmPassword === password) {span.innerHTML = "*輸入正確";span.style.color = "rgb(11, 240, 72)";return true;} else {//兩次輸入不一致，顯示輸入錯誤，并把信息顏色變成紅色span.innerHTML = "*輸入錯誤";span.style.color = "rgb(250, 6, 14)";return false;}
}function checkMail() {var email = document.getElementById("email").value;var reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/var span = document.getElementById("emailSpan");if (reg.test(email)) {span.innerHTML = "*輸入正確";span.style.color = "rgb(11, 240, 72)";return true;} else {span.innerHTML = "*輸入錯誤";span.style.color = "rgb(250, 6, 14)";return false;}
}var form = document.getElementById('register-form');
var error = document.querySelector('.error');
var success = document.querySelector('.success');form.addEventListener('submit', function (e) {e.preventDefault();checkStuId();checkUsername();checkPassword();checkConfirmPassword();checkMail();var username = document.getElementById("username").value; //獲取輸入的姓名if (checkStuId() && checkUsername() && checkPassword() && checkConfirmPassword() && checkMail()) {alert(username + ",歡迎您");success.innerHTML = "歡迎您" + username;} else {alert("請完成輸入");}
});
總結
以上是生活随笔為你收集整理的简单注册界面的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
