完成登錄與註冊頁面的前端
阿新 • • 發佈：2017-10-31
com innerhtml function () body inner col charset alt
登陸
<!doctype html> <html lang="em"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"><title>登錄</title> <link rel="stylesheet" type="text/css" href="../static/css/styles.css"> <script src="../static/js/test.js"></script> </head> <body class="body"> <div class="box"> <h2 class="ziti">登錄</h2> <div class="input_box"> <input id="uname" type="text" placeholder="請輸入用戶名"> </div> <div class="input_box"> <input id="upass" type="password" placeholder="請輸入密碼"> </div> <div id="error_box"><br></div> <div class="input_box"> <button onclick="fnLogin()">登錄</button> </div> </div> </body> </html>
js
function fnLogin() { var oUname = document.getElementById("uname"); var oError = document.getElementById("error_box"); var oUpass = document.getElementById("upass"); oError.innerHTML="<br>" if(oUname.value.length<6 || oUname.value.length >12){ oError.innerHTML="用戶名6-12"; return; }else if ((oUname.value.charCodeAt(0)>=48) && (oUname.value.charCodeAt(0)<=57)){ oError.innerHTML="第一位只能是字母"; return; } else for (var i=0 ; i<oUname.value.length;i++){ if (oUname.value.charCodeAt(i)<48 || (oUname.value.charCodeAt(i)>57)&&(oUname.value.charCodeAt(i)<97)|| oUname.value.charCodeAt(i)>122){ oError.innerHTML="只能是字母或數字"; return; } } if(oUpass.value.length<6 || oUpass.value.length>12){ oError.innerHTML="密碼6-12位"; return; } window.alert("登錄成功") }
css
.ziti{ font-size: 30px; } .body{ background-color: lightblue; text-align: center; } .input_box{ height: 45px; }
註冊
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>註冊</title> <link rel="stylesheet" type="text/css" href="../static/css/styles.css"> <script src="../static/js/zhuce.js"></script> </head> <body class="body"> <div class="box"> <h2 class="ziti">註冊</h2> <div class="input_box"> <input id="uname" type="text" placeholder="你的用戶名"> </div> <div class="input_box"> <input id="upass" type="password" placeholder="設置密碼"> </div> <div class="input_box"> <input id="uiphone" type="number" placeholder="手機號"> </div> <div id="error_box"><br></div> <div class="input_box"> <button onclick="fnLogin()">註冊</button> </div> </div> </body> </html>
js
function fnLogin() {
var oUname = document.getElementById("uname");
var oError = document.getElementById("error_box");
var oUiphone = document.getElementById("uiphone");
var oUpass = document.getElementById("upass");
oError.innerHTML="<br>"
if(oUname.value.length<6 || oUname.value.length >12){
oError.innerHTML="用戶名6-12";
return;
}else if ((oUname.value.charCodeAt(0)>=48) && (oUname.value.charCodeAt(0)<=57)){
oError.innerHTML="第一位只能是字母";
return;
} else for (var i=0 ; i<oUname.value.length;i++){
if (oUname.value.charCodeAt(i)<48 || (oUname.value.charCodeAt(i)>57)&&(oUname.value.charCodeAt(i)<97)|| oUname.value.charCodeAt(i)>122){
oError.innerHTML="只能是字母或數字";
return;
}
}
if(oUpass.value.length<6 || oUpass.value.length>12){
oError.innerHTML="密碼6-12位";
return;
}
if ((oUiphone.value.length >11)|| (oUiphone.value.length <11)){
oError.innerHTML="手機號碼錯誤";
return;
}
window.alert("註冊成功")
}
完成登錄與註冊頁面的前端