JS實現(xiàn)用戶注冊界面功能
更新時間：2021年09月22日 09:51:54 作者：yezi__626
這篇文章主要為大家詳細介紹了JS實現(xiàn)用戶注冊界面功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JS實現(xiàn)用戶注冊界面功能的具體代碼，供大家參考，具體內容如下
1.css代碼
*{
margin: 0;
padding: 0;
}
.block{
position: relative;
margin: 0 auto;
margin-top: 80px;
width: 710px;
height: 500px;
border: 1px solid rgba(29, 29, 29, 0.64);
background: url("./img/logo2396.jpg")no-repeat;
background-size: 100%;
}
.photo {
position: absolute;
z-index: 1;
width: 710px;
height: 500px;
background-color: rgba(0, 0, 0, 0.71);
}
.biao{
margin-top: 20px;
position: absolute;
z-index: 2;
margin-left: 150px;
}
li{
position: relative;
padding-left:20px ;
list-style: none;
line-height: 70px;
width: 400px;
border: 1px solid white;
margin:5px auto;
}
li input[type=text]{
padding-left: 20px;
border-style: none;
background: none;
}
input[type=submit]{
margin-left: 150px;
border-style: none;
font-size: 25px;
color: white;
background: none;
}
.d{
background-color: rgba(222, 53, 3, 0.71);
}
.txt{
line-height: 50px;
width: 280px;
font-size: 15px;
color: white;
}
.error {
position: absolute;
z-index: 2;
left: 150px;
color: rgba(253, 253, 253, 0.4);
font-size: 14px;
}
2.html代碼
<div class="block">
<div class="photo"></div>
<div class="biao">
<form name="form">
<ul>
<li><label style="color: white">賬 號：</label><input class="txt" type="text"></li>
<li><label style="color: white">密 碼：</label><input class="txt" type="text"></li>
<li><label style="color: white">確認密碼：</label><input class="txt" type="text"></li>
<li><label style="color: white">電話號碼：</label><input class="txt" type="text"></li>
<li><label style="color: white">郵 箱：</label><input class="txt" type="text"></li>
<li class="d"><input id="sub" type="submit" value="注冊"></li>
</ul>
</form>
</div>
</div>
3.js代碼
var sub=document.getElementById("sub");
var txt=document.getElementsByClassName("txt");
var li=document.getElementsByTagName("li");
document.forms.form.onsubmit=function(){
yan();
var errl=document.getElementsByClassName("error").length;
if(!errl){
return true;
}
return false;
};
function yan(){
for(var i=0;i<txt.length;i++){
txt[i].focus();
}
sub.focus();
}
for(var i=0;i<txt.length;i++)
{
txt[i].index=i;
txt[i].onfocus=function (){
if(this.parentElement.children[2]==undefined) return;
this.parentElement.children[2].remove();
};
txt[i].onblur=function (){
switch (this.index){
case 0:
if(this.value==""){
var s=document.createElement("span");
s.innerHTML="請輸入賬號";
s.className="error";
li[this.index].appendChild(s)
}
else{
var s=document.createElement("span");
s.innerHTML="";
s.className="sucess";
li[this.index].appendChild(s)
}
break;
case 1:
if(this.value==""){
var s=document.createElement("span");
s.innerHTML="請輸入密碼";
s.className="error";
li[this.index].appendChild(s)
}
else if(this.value.length<6||this.value.length>11) {
var s=document.createElement("span");
s.innerHTML="密碼錯誤";
s.className="error";
li[this.index].appendChild(s);
txt[this.index].value="";
}
else{
var s=document.createElement("span");
s.innerHTML="";
s.className="sucess";
li[this.index].appendChild(s)
}
break;
case 2:
if(this.value==""){
var s=document.createElement("span");
s.innerHTML="請再次確認密碼";
s.className="error";
li[this.index].appendChild(s);
txt[this.index].value="";
}
else if(this.value!=txt[1].value){
var s=document.createElement("span");
s.innerHTML="請重新輸入";
s.className="error";
li[this.index].appendChild(s);
txt[this.index].value="";
}
else{
var s=document.createElement("span");
s.innerHTML="";
s.className="sucess";
li[this.index].appendChild(s)
}
break;
case 3:
if(this.value==""){
var s=document.createElement("span");
s.innerHTML="請輸入號碼";
s.className="error";
li[this.index].appendChild(s)
}
else if(this.value.length!=11){
var s=document.createElement("span");
s.innerHTML="號碼格式錯誤";
s.className="error";
li[this.index].appendChild(s)
txt[this.index].value="";
}
else{
var s=document.createElement("span");
s.innerHTML="";
s.className="sucess";
li[this.index].appendChild(s)
}
break;
case 4:
if(this.value==""){
var s=document.createElement("span");
s.innerHTML="請輸入郵箱";
s.className="error";
li[this.index].appendChild(s)
}
else{
var s=document.createElement("span");
s.innerHTML="";
s.className="sucess";
li[this.index].appendChild(s)
}
break;
}
}
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
javascript動態(tài)創(chuàng)建及刪除元素的方法
這篇文章主要介紹了javascript動態(tài)創(chuàng)建及刪除元素的方法,涉及針對DOM元素操作的技巧,非常具有實用價值,需要的朋友可以參考下2014-12-12
Three.js中實現(xiàn)一個OBBHelper實例詳解
這篇文章主要介紹了Three.js中實現(xiàn)一個OBBHelper,本文參考Box3Helper源碼，并寫出一個OBBHelper，本文結合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-09-09
這篇文章主要介紹了JS簡單實現(xiàn)點擊按鈕或文字顯示遮罩層的方法,涉及javascript鼠標事件響應及頁面元素屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2017-04-04
菜單上下顯示的實現(xiàn)方法有很多,在本文將為大家介紹下使用js是如何實現(xiàn)的，需要的朋友不要錯過2013-11-11
你真的知道setTimeout是如何運行的嗎？這篇文章主要介紹了setTimeout運行方式，感興趣的小伙伴們可以參考一下2016-08-08
echarts拖拽滑塊dataZoom-slider自定義樣式簡單適配移動端
在電腦端和移動端的數(shù)據(jù)展示中,針對移動端的特殊性,進行了一系列優(yōu)化措施,這篇文章主要介紹了echarts拖拽滑塊dataZoom-slider自定義樣式簡單適配移動端的相關資料,需要的朋友可以參考下2024-09-09
js將字符串轉成正則表達式的實現(xiàn)方法。其實很簡單哦！需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
下面小編就為大家?guī)硪黄猨s 獲取經緯度的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
這篇文章主要為大家詳細介紹了基于JavaScript實現(xiàn)表格滾動分頁，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
相信有C++、C#或Java等編程經驗的各位，對于this關鍵字再熟悉不過了。由于Javascript是一種面向對象的編程語言，它和C++、C#或Java一樣都包含this關鍵字，接下來我們將向大家介紹Javascript中的this關鍵字2012-08-08