注册界面演示代码（前端开发）
生活随笔
收集整理的這篇文章主要介紹了
注册界面演示代码（前端开发）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>注冊</title><style>* {margin: 0px;padding: 0px;/*這樣的設置會阻止元素大小的改變，因為設置內邊距時元素大小會發生改變*/box-sizing: border-box;}body {background: url("image/bjt01.jpg") no-repeat center;background-size: cover;}.layout {/*background-image: url("image/bjt01.jpg");*//*background-size: cover;*/width: 900px;height: 500px;border: 8px solid #EFFBFB;background-color: white;margin: 110px auto auto auto;}.div-left {float: left;margin: 15px;}.div-center {float: left;}.div-right {float: right;margin-top: 20px;margin-right: 20px;}.div-left > p:first-child {color: #facb48;font-size: 20px;}.div-left > p:last-child {color: #ABADAF;font-size: 20px;}.div-right > p {font-size: 15px;}.div-right p a {color: pink;}.div-center {width: 520px;margin-top: 10px;}.td-left {width: 110px;text-align: right;height: 45px;}.td-right {padding-left: 20px;}#userName, #password, #email, #realName, #phoneNumber, #birthday, #verCode {width: 251px;height: 32px;border: 1px solid #E6EAED;padding-left: 10px;border-radius: 5px;/*輸入框，參照td垂直居中*/vertical-align: middle;}#verCode {width: 120px;margin-right: 20px;}#img-check {vertical-align: middle;height: 32px;}#sub-btn {width: 150px;height: 40px;background-color: #facb48;border: 1px solid #facb48;}/*設置placeholder字的顏色*/input::-webkit-input-placeholder {/* WebKit browsers */color: #ccc;}.error {font-size: 15px;color: red;margin-left: 10px;}/*設置對鉤圖片垂直居中，寬度和高度*/.tick {vertical-align: middle;width: 25px;height: 25px;}/*顯示線框*/.div-right, .div-center, .td-right, .td-left, .td-btn {/*border: 1px solid #BF562B;*/}#td-btn {padding-left: 130px;}#sub-btn {margin-top: 20px;}</style><script !src="">/*** 分析：* 1.給表單綁定onsubmit事件* 監聽器中判斷每個方法檢驗的結果，如果都是true，則監聽器方法返回true；如果有一個為false,* 則監聽器方法返回false* 2.定義一些方法分別校驗各個表單項* 3.給各個表單項綁定onblur事件，失去焦點后觸發校驗監聽器*/window.onload = function () {// 1.給表單綁定onsubmit事件document.getElementById("form").onsubmit = function () {// 調用用戶名校驗方法，調用密碼校驗方法return checkUsername() && checkPassword() && checkPhoneNumber() && checkEmail() && checkVerCode();};// 給用戶名輸入框注冊離焦事件監聽器document.getElementById("userName").onblur = function () {// 調用校驗用戶名的方法checkUsername();};// 給密碼輸入框注冊離焦事件監聽器document.getElementById("password").onblur = function () {// 調用校驗密碼的方法checkPassword();};// 給手機號輸入框注冊離焦事件監聽器document.getElementById("phoneNumber").onblur = function () {// 調用校驗手機號的方法checkPhoneNumber();}// 給郵箱輸入框注冊離焦事件監聽器document.getElementById("email").onblur = function () {// 調用校驗郵箱的方法checkEmail();}// 給驗證碼輸入框綁定離焦事件document.getElementById("verCode").onblur = function () {// 調用校驗驗證碼的方法checkVerCode();}};// 校驗用戶名function checkUsername() {// 1.獲取用戶名var userName = document.getElementById("userName").value;// 2.定義正則表達式var regUserName = /^\w{6,12}$/;// 3.判斷用戶名是否符合正則表達式var flag = regUserName.test(userName);// 4.提示信息if (flag) {// 提示對鉤document.getElementById("prompt-un").innerHTML = "<img class='tick' src='image/tick.png'/>";} else {// 提示：用戶名格式錯誤document.getElementById("prompt-un").innerHTML = "用戶名格式錯誤！";}return flag;}/*** 校驗密碼*/function checkPassword() {// 1.獲取密碼var password = document.getElementById("password").value;// 2.定義正則表達式var regPassword = /^\w{6,12}$/;// 3.判斷密碼是否符合正則表達式var flag = regPassword.test(password);// 4.提示信息if (flag) {// 符合正則表達式則提示對鉤document.getElementById("prompt-pw").innerHTML = "<img class='tick' src='image/tick.png'/>";} else {// 不符合正則表達式則提示：密碼格式錯誤document.getElementById("prompt-pw").innerHTML = "密碼格式錯誤！";}return flag;}// 校驗郵箱function checkEmail() {let flag = true;// 獲取郵箱地址let email = document.getElementById("email").value;if (!email) {// 如果郵箱為空，直接返回truereturn flag;}let regEmail = /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/;flag = regEmail.test(email);if (flag) {// 如果符合正則表達式則顯示對鉤圖標document.getElementById("prompt-email").innerHTML = "<img class='tick' src='image/tick.png'/>";} else {// 如果不符合正則表達式則顯示：郵箱格式錯誤document.getElementById("prompt-email").innerHTML = "郵箱格式錯誤";}}// 校驗手機號碼function checkPhoneNumber() {var flag = true;// 獲取手機號碼var phoneNumber = document.getElementById("phoneNumber").value;if (!phoneNumber) {// 手機號為空，直接返回truereturn flag;}var regPhoneNumber = /(\+86)?1\d{10}/;flag = regPhoneNumber.test(phoneNumber);if (flag) {// 符合正則表達式則顯示對鉤document.getElementById("prompt-pn").innerHTML = "<img class='tick' src='image/tick.png'/>";} else {// 不符合正則表達式則顯示：手機號格式錯誤document.getElementById("prompt-pn").innerHTML = "手機號格式錯誤";}return flag;}// 校驗驗證碼function checkVerCode() {// 獲取驗證碼let verCode = document.getElementById("verCode").value;// 定義正則表達式，匹配任意數字或英文字母組合而成的6個字符let regVerCode = /^[\d\a]{6}$/;// 校驗驗證碼let flag = regVerCode.test(verCode);if (flag) {// 驗證碼格式正確則調用服務端的校驗驗證碼的接口，這里省略document.getElementById("prompt-vc").innerHTML = "<img class='tick' src='image/tick.png'/>";} else {// 驗證碼格式錯誤，顯示：驗證碼格式錯誤document.getElementById("prompt-vc").innerHTML = "驗證碼格式錯誤";}return flag;}</script></head>
<body>
<!--注冊窗口-->
<div class="layout"><!--窗口標題--><div id="div_left" class="div-left"><p class="title-en">新用戶注冊</p><p class="title-zh">USER REGISTER</p></div><div id="div_center" class="div-center"><!--注冊表單項--><form id="form" action="#" method="get"><table><tr><td class="td-left"><label for="userName">用戶名</label></td><td class="td-right"><input type="text" name="userName" id="userName" placeholder="請輸入用戶名"><spanid="prompt-un" class="error"></span></td></tr><tr><td class="td-left"><label for="password">密碼</label></td><td class="td-right"><input type="text" name="password" id="password" placeholder="請輸入密碼"><spanid="prompt-pw" class="error"></span></td></tr><tr><td class="td-left"><label for="email">Email</label></td><td class="td-right"><input type="email" name="email" id="email" placeholder="請輸入郵箱"><spanid="prompt-email" class="error"></span></td></tr><tr><td class="td-left"><label for="realName">姓名</label></td><td class="td-right"><input type="text" name="realName" id="realName" placeholder="請輸入姓名"></td></tr><tr><td class="td-left"><label for="phoneNumber">手機號</label></td><td class="td-right"><input type="text" name="phoneNumber" id="phoneNumber"placeholder="請輸入手機號"><span id="prompt-pn" class="error"></span></td></tr><tr><td class="td-left">性別</td><td class="td-right"><input type="radio" value="0"> 男 <input type="radio" value="1"> 女</td></tr><tr><td class="td-left">出生日期</td><td class="td-right"><input type="date" name="birthday" id="birthday"></td></tr><tr><td class="td-left"><label for="verCode">驗證碼</label></td><td class="td-right"><input type="text" name="verCode" id="verCode" placeholder="請輸入驗證碼"><imgid="img-check"src="image/ver_code.png"/><span id="prompt-vc" class="error"></span></td></tr><tr><td colspan="2" id="td-btn" class="td-btn"><input type="submit" value="注冊" id="sub-btn"></td></tr></table></form></div><!--登錄指引--><div id="div-right" class="div-right"><p>已有賬號？<a href="#">立即登錄</a></p></div>
</div>
</body>
</html>
總結
以上是生活随笔為你收集整理的注册界面演示代码（前端开发）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 索尼 A7C II 与 A7CR 相机开
- 下一篇： 如何设置背景图（前端开发）