界面做的有点丑。。。。。
<!DOCTYPE html>
<html lang="CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
i {
font-weight: normal;
font-style: normal;
color: red;
font-size: 14px;
display: none;
}
a {
text-decoration: none;
color: green;
font-size: 12px;
}
ul {
list-style: none;
}
body {
background-color: rgba(0, 0, 0, 0.1);
}
html {
width: 100%;
height: 100%;
}
.box {
width: 900px;
height: 700px;
background-color: #fff;
margin: 10px auto;
position: relative;
z-index: 0;
}
.box h3 {
color: rgba(0, 0, 0, 0.3);
padding: 70px 0 40px 70px;
}
.box .it {
font-size: 16px;
width: 450px;
height: 500px;
/* margin: 0 auto; */
transform: translateX(-30%);
margin-left: 50%;
/* background-color: red; */
}
.box .it div {
width: 450px;
height: 35px;
margin: 20px;
/* margin-bottom: 5px; */
/* background-color: red; */
line-height: 45px;
}
[type=text],
[type=password] {
width: 220px;
height: 30px;
margin-right: 15px;
border: 1px solid rgb(0, 0, 0, 0.2);
}
button {
width: 205px;
height: 30px;
background-color: green;
border: 1px solid transparent;
}
.it div:nth-child(3) {
position: relative;
}
.it div:nth-child(3) a {
position: absolute;
right: 53%;
top: 2px;
}
.Tips {
display: none;
overflow: hidden;
width: 100%;
height: 100%;
position: absolute;
z-index: 999;
background-color: rgb(0, 0, 0, 0.1);
text-align: center;
}
.Tips div {
transform: translateY(-50%) translateX(-50%);
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 200px;
background-color: white;
border: 1px solid transparent;
}
.Tips div p {
text-align: center;
margin: 40px 0 70px 20px;
border: 1px solid transparent;
}
</style>
</head>
<body>
<div class="Tips">
<div>
<p>未勾选《用户服务协议》是否勾选</p>
<button style="margin-right: 40px;" id="yes">是</button>
<button id='no'>否</button>
</div>
</div>
<div class="box">
<h3>
新用户注册
</h3>
<div class="it">
<div><input type="text" placeholder="用户名"><i>请输入正确的用户名</i></div>
<div><input type="text" placeholder="手机号"><i>请输入正确的手机号</i></div>
<div><input type="text" placeholder="验证码"><a href="javascript:;" id="ma">获取验证码</a><i>请输入正确的验证码</i></div>
<div><input type="password" placeholder="密码"><i>请输入正确的密码</i></div>
<div><input type="password" placeholder="确认密码"><i>请输入正确的密码</i></div>
<div style="margin-top: 10px;margin-bottom: 10px ;width:230px;text-align: center;"><input type="checkbox"
style="vertical-align: middle;"><span style="margin-left: 10px;font-size: 12px;">已阅读并同意</span><a
href="javascript:;">《用户服务协议》</a>
</div>
<div><button style="cursor: pointer;" id="next">下一步</button></div>
</div>
</div>
<script>
// 验证码倒计时
Verification_code()
const err_message = document.querySelectorAll('i')
// console.log(err_message[1])
const text = document.querySelectorAll('[type=text]')
const password = document.querySelectorAll('[type=password]')
const bt = document.querySelector('#next')
let it = []
it = new_it(it, text)
it = new_it(it, password)
console.log(it)
// let t = /[0-9a-z-_]{6,16}/
bt.addEventListener('click', () => {
let err = Null_check(it)
if (err === null) {
//无空值,进行下一步的正则判断
let f = 0
//将错误信息清空
clear_err()
//利用正则进行下一步的检查
regular_check()
err_message[4].style.display = password[0].value === password[1].value ? 'none' : 'inline'
//查看是否有错误,无错误检查复选框
if (check_display())
f = ch_check()
if (f)
alert('完成注册')
}
else {
//存在空值
alert('输入内容不正确')
//清空错误
clear_err()
//首先检查正则
regular_check()
//将错误的下标穿进去,并打印
print_err_message(err)
}
})
//正则检查
let regular = [/^[0-9a-zA-Z-_]{6,10}$/, /^[1-9][0-9]{10}/, /[0-9]{6}/, /[0-9a-z-_]{6,16}/, /[0-9a-z-_]{6,16}/]
function regular_check() {
let arr = []
for (let i = 0; i < it.length; i++) {
if (regular[i].test(it[i].value) === false)
arr.push(i)
}
print_err_message(arr)
}
//对有无错误值进行检查
function check_display() {
for (let i = 0; i < err_message.length; i++) {
if (err_message[i].style.display === 'inline') {
return false
}
}
return true
}
//对复选框进行检查
function ch_check() {
const Tips = document.querySelector('.Tips')
const ch = document.querySelector('[type=checkbox]')
if (ch.checked === false) {
Tips.style.display = 'block'
const y = document.querySelector('#yes')
const n = document.querySelector('#no')
y.addEventListener('click', () => {
Tips.style.display = 'none'
ch.checked = true
return true
})
n.addEventListener('click', () => {
Tips.style.display = 'none'
return false
})
}
else {
return true
}
}
//合并数组
function new_it(arr, lst) {
for (let i = 0; i < lst.length; i++) {
arr.push(lst[i])
}
return arr
}
//空值检查
function Null_check(arr) {
let err = []
let flag = 1
for (let i = 0; i < arr.length; i++) {
if (arr[i].value === '') {
flag = 0
err.push(i)
}
}
if (flag) {
console.log('wukongzhi')
return null
}
else {
console.log('youkongzhi')
return err
}
}
//错误打印
function print_err_message(arr) {
for (let i = 0; i < arr.length; i++) {
err_message[arr[i]].style.display = 'inline'
}
}
//清空错误
function clear_err() {
for (let i = 0; i < err_message.length; i++) {
err_message[i].style.display = 'none'
}
}
//验证码
function Verification_code() {
const m = document.querySelector('#ma')
let flag = 1
function fn() {
if (flag) {
flag = 0
let i = 5;
m.innerHTML = `在0${i--}秒后点击`
const timer = setInterval(() => {
m.innerHTML = `在0${i--}秒后点击`
if (i === -2) {
flag = 1
m.innerHTML = `获取验证码`
clearInterval(timer)
}
}, 1000)
}
}
m.addEventListener('click', function (e) {
e.preventDefault()
fn()
})
}
</script>
</body>
</html>