本篇內容主要講解“怎么用JS代碼實現登陸界面”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“怎么用JS代碼實現登陸界面”吧!
代碼如下：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input{ width: 100px; height: 20px; /* float: left; */
} div{ width: 100px; height: 20px; background-color: blueviolet; /* float: left; */
display: none;
} </style> </head><body>
<form id="myform">
登陸：<input type="text" id="t1" value="">
<br>
密碼：<input type="password" id="t2" value="">
<br>
確認密碼：<input type="password" id="t3" value="">
<br>
電子郵件：<input type="text" id="t4" value="">
<br>
<input type="submit" value="登陸"></form>
<script>
window.onload=function (){ var formObj=document.getElementById("myform");
formObj.onsubmit=checkAll;
} function checkAll(){ if(userName()&&checkPass()&&checkRpass()&&checkEmail()){ document.write("<h2>恭喜你</h2>"); document.write("<h2>登陸成功</h2>");
}
} function userName(){ var strName=document.getElementById("t1").value; if(strName.length==0){
alert("用戶名不能為空"); return false;
} if(strName.length<4||strName.length>16){
alert("用戶名的長度應在4~16之間"); return false;
} return true;
} function checkPass(){ var pass=document.getElementById("t2").value; if(pass.length==0){
alert("密碼不能為空"); return false;
} if(pass.length<6||pass.length>32){
alert("為了保證您的安全，密碼長度為6位以上32位以下"); return false;
} return true;
} function checkRpass(){ var rpass=document.getElementById("t3").value; var pass=document.getElementById("t2").value; if(rpass!=pass){
alert("密碼與原密碼不一致"); return false;
} return true;
} function checkEmail(){ var email=document.getElementById("t4").value; if(email.length==0){
alert("郵件地址不能為空"); return false;
} if(email.indexOf("@")==-1&&email.indexOf(".")==-1){
alert("郵件地址應同時包含 @ . 兩個符號"); return false;
} return true;
} </script></body></html>再給它稍微優化一下
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input{ width: 100px; height: 20px; /* float: left; */
} div{ width: 100px; height: 20px; background-color: blueviolet; /* float: left; */
display: none;
} </style> </head><body>
<form id="myform">
用戶名：<input type="text" id="t1" value="請輸入用戶名">
<br>
密碼：<input type="text" id="t2" value="請輸入密碼">
<br>
確認密碼：<input type="text" id="t3" value="請確認">
<br>
E-mail：<input type="text" id="t4" value="請輸入郵件地址">
<br>
出生日期：<select id="year"></select>年 <select id="month"></select>月 <select id="day"></select>日 <br>
<input type="submit" value="登陸"></form>
<script>
function $ (ElementID){ return document.getElementById(ElementID);
} window.onload=function (){ var formObj=$("myform");
formObj.onsubmit=checkAll;
year();
month();
day(); var name=$("t1"); var pass=$("t2"); var rpass=$("t3"); var email=$("t4");
name.onfocus=empty;
pass.onfocus=empty;
rpass.onfocus=empty;
email.onfocus=empty;
} function empty(){ if(this.value==this.defaultValue){ this.value="";
}
} function year(){ var yearObj=$("year"); var year=new Date(); var newYear=year.getFullYear(); for(var i=1900;i<=newYear;i++){
yearObj.options[i-1900]=new Option(i);
}
} function month(){ var monthObj=$("month"); for(var i=0;i<12;i++){
monthObj.options[i]=new Option(i+1);
}
} function day(){ var dayObj=$("day"); for(var i=0;i<31;i++){
dayObj.options[i]=new Option(i+1);
}
} function checkAll(){ var uesrObj=$("t1"); var strName=uesrObj.value; var defaultName=uesrObj.defaultValue;//獲取默認值
if(strName==defaultName){
alert("用戶名為默認值，請重新輸入");
uesrObj.focus();//自動獲取焦點
return false;
} if(strName.length==0){
alert("用戶名不能為空");
uesrObj.focus(); return false;
} if(strName.length<4||strName.length>16){
alert("用戶名的長度應在4~16之間");
uesrObj.select();//制動獲取選中對象
return false;
} var passObj=$("t2"); var strPass=passObj.value; if(strPass==0){
alert("密碼不能為空");
passObj.focus(); return false;
} if(strPass.length<6||strPass.length>32){
alert("為了保證您的安全，密碼長度為6位以上32位以下");
passObj.select(); return false;
} var rpassObj=$("t3"); var strRpass=rpassObj.value; if(strRpass!=strPass){
alert("密碼與原密碼不一致");
rpassObj.select(); return false;
} var emailObj=$("t4"); var strEmail=emailObj.value; if(strEmail.length==0){
alert("郵件地址不能為空");
emailObj.focus(); return false;
} if(strEmail.indexOf("@")==-1&&strEmail.indexOf(".")==-1){//檢查是否有括號里面的符號 有的話返回 -1
alert("郵件地址應同時包含 @ . 兩個符號");
emailObj.select(); return false;
}
} </script></body></html>到此，相信大家對“怎么用JS代碼實現登陸界面”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
