溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下JavaScript如何實現簡易登錄注冊頁面，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
具體內容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>login</title>
<!-- <link rel="stylesheet" type="text/css" href="pageChange.css" /> -->
<!-- <script src="pageChange.js"></script> -->
</head>
<body>
<div class="control">
<div class="item">
<div class="active">登錄</div>
<div>注冊</div>
</div>
<div class="content">
<div class="box1">
<p>賬號</p>
<input type="text" placeholder="username" name="use2" />
<span></span>
<p>密碼</p>
<input type="password" placeholder="password" name="use2" />
<span></span>
<br/>
<input type="submit" value="登錄" />
</div>
<div class="box2">
<p>用戶名</p>
<input type="text" placeholder="username" name="use1" />
<span>請輸入以字母開頭至少4位數用戶名</span>
<p>密碼</p>
<input type="password" placeholder="password" name="use1" />
<span>請輸入至少六位數的密碼</span>
<p>郵箱</p>
<input type="text" placeholder="email" name="use1" />
<span>請輸入郵箱賬號</span>
<br/>
<input type="submit" value="注冊" />
</div>
</div>
</div>
</body>
</html>
<style>
* {
margin: 0;
padding: 0;
}
.error {
color: red;
font-size: 14px;
}
.cg {
color: greenyellow;
font-size: 14px;
}
body {
background: #f3f3f3;
}
.control {
width: 340px;
background: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 5px;
}
.item {
width: 340px;
height: 60px;
background: #eeeeee;
}
.item div {
width: 167px;
height: 60px;
display: inline-block;
color: black;
font-size: 18px;
text-align: center;
line-height: 60px;
cursor: pointer;
}
.content {
width: 100%;
}
.content div {
margin: 20px 30px;
display: none;
text-align: left;
}
p {
color: #4a4a4a;
margin-top: 30px;
margin-bottom: 6px;
font-size: 15px;
}
.content input[type="text"],
.content input[type="password"] {
width: 100%;
height: 40px;
border-radius: 3px;
border: 1px solid #adadad;
padding: 0 10px;
box-sizing: border-box;
}
.content input[type="submit"] {
margin-top: 40px;
width: 100%;
height: 40px;
border-radius: 5px;
color: white;
border: 1px solid #adadad;
background: #00dd60;
cursor: pointer;
letter-spacing: 4px;
margin-bottom: 40px;
}
.active {
background: white;
}
.item div:hover {
background: #f6f6f6;
}
</style>
<script>
window.onload = function () {
var item = document.querySelectorAll(".item");
var it = item[0].querySelectorAll("div")
var content = document.querySelectorAll(".content");
var con = content[0].querySelectorAll("div");
var na1 = document.querySelectorAll('[name="use1"]')
var na2 = document.querySelectorAll('[name="use2"]')
var span1 = document.querySelectorAll('.box2 span')
var span2 = document.querySelectorAll('.box1 span')
var zc = document.querySelector('[value="注冊"]')
var dl = document.querySelector('[value="登錄"]')
console.log(span2)
var userReg = /^[a-zA-Z][a-zA-Z0-9]{3,9}$/
var telReg = /^[0-9a-zA-Z].{4,14}$/
var emailReg = /(^[a-zA-Z]\w{5,17}@((126|163)\.com|yeah\.net)$)|(^[1-9]\d{4,10}@qq\.com$)/
for (let i = 0; i < it.length; i++) {
it[i].onclick = function () {
for (let j = 0; j < it.length; j++) {
it[j].className = '';
con[j].style.display = "none";
}
this.className = "active";
it[i].index = i;
con[i].style.display = "block";
}
}
var flag = false
// 封裝
function cf(trr, srnr, index, str, str1) {
var a1 = trr.test(srnr)
if (!a1) {
index.className = 'error'
index.innerText = str
return true
} else {
index.className = 'cg'
index.innerText = str1
return false
}
}
// 正則驗證
na1[0].oninput = () => cf(userReg, na1[0].value, span1[0], 'x 用戶名不符合規范', '√ 通過驗證')
na1[1].oninput = () => cf(telReg, na1[1].value, span1[1], 'x 密碼不符合規范', '√ 通過驗證')
na1[2].oninput = () => cf(emailReg, na1[2].value, span1[2], 'x 郵箱書寫不符合規范', '√ 通過驗證')
var arr=[]
zc.onclick = () => {
flag = true
if (na1[0].value === '') {
span1[0].className = 'error'
return flag = false
}
else if (na1[1].value === '') {
span1[1].className = 'error'
return flag = false
}
else if (na1[2].value === '' || span1[2].className == 'error') {
span1[2].className = 'error'
return flag = false
} else {
if (flag && na1[2].className != 'error') {
// for (let i = 0; i < na1.length; i++) {
// // arr[i]=arr.push(na1[i].)
// console.log(arr[i])
// na1[i].value = ''
// }
alert('注冊成功')
}
}
}
dl.onclick = function () {
if (na1[0].value != na2[0].value || na1[0].value == '') {
span2[0].className = 'error'
span2[0].innerText = '用戶名不一致'
} else {
span2[0].innerText = ''
span2[0].className = ''
}
if (na1[1].value === '' || na1[1].value != na2[1].value) {
span2[1].className = 'error'
span2[1].innerText = '密碼錯誤'
} else {
span2[1].innerText = ''
span2[1].className = ''
}
if (flag) {
alert('登錄成功')
}
else if(na1[0].value != na2[0].value&& na1[1].value != na2[1].value) {
alert('賬號不存在')
}
}
}
</script>效果
以上是“JavaScript如何實現簡易登錄注冊頁面”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
