<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.formbox {
width: 500px;
height: 400px;
background: #f5f5f5;
/* margin: 100px auto; */
padding-left: 20px;
padding-top: 50px;
border-radius: 5px;
}
p {
height: 50PX;
display: flex;
align-items: center;
font-size: 14px;
}
input {
height: 30px;
width: 300px;
margin-right: 10px;
border-radius: 4px;
border: none;
outline: none;
padding-left: 10px;
}
button {
width: 100px;
height: 30px;
background: #0ba5e7;
border: none;
text-align: center;
border-radius: 10px;
}
#showCode {
display: block;
width: 50px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 5px;
background: gainsboro;
margin-left: 10px;
}
</style>
</head>
<body>
<div class="formbox">
<p>
<input type="text" id="userName">
<span id="userSpan">请输入用户名</span>
</p>
<p>
<input type="text" id="passwd">
<span id="pswSpan">请输入密码</span>
</p>
<p>
<input type="text" id="passcode">
<span id="psSpan">请输入验证码</span>
<span id="showCode"></span>
</p>
<p><button id="btn">完成注册</button></p>
</div>
<script>
//生成3个数组，数字，小写字母，大写字母数组，再拼接起来
var numArr = []
//数字
for (var i = 0; i < 10; i++) {
numArr.push(i + ‘‘)
}
var smallArr = []
//小写
for (var i = 97; i <= 122; i++) {
//String.fromCharCode(数字) 把数字转成ASCII对应的字符
var str = String.fromCharCode(i)
smallArr.push(str)
}
var bigArr = []
//大写
for (var i = 65; i <= 90; i++) {
var str = String.fromCharCode(i)
bigArr.push(str)
}
//arr是三个数组拼接到一起的
var arr = numArr.concat(smallArr, bigArr)
//验证码页面一打开就有
$(‘#showCode‘).innerHTML = randCode()
//点击刷新验证码
$(‘#showCode‘).onclick = function () {
$(‘#showCode‘).innerHTML = randCode()
}
//用户名
$(‘#userName‘).onblur = function () {
var userVal = this.value;
// 判断是否为空
if (/^.{0}$/.test(userVal)) {
msg($(‘#userSpan‘), ‘输入不能为空‘, ‘red‘);
return
}
// 判断长度 6-12
if (!(/^.{6,12}$/.test(userVal))) {
msg($(‘#userSpan‘), ‘长度不对‘, ‘red‘);
return
}
// 数字不能开头
if (/^\d/.test(userVal)) {
msg($(‘#userSpan‘), ‘数字不能开头‘, ‘red‘);
return
}
// 不能有非法字符
if (/\W/.test(userVal)) {
msg($(‘#userSpan‘), ‘只能数字字母组合不能包含非法字符‘, ‘red‘);
return
}
msg($(‘#userSpan‘), ‘√‘, ‘green‘);
}
//密码框
$(‘#passwd‘).onblur = function () {
var pwdVal = this.value;
var count1 = /\d/.test(pwdVal) ? 1 : 0;
var count2 = /[a-z]/.test(pwdVal) ? 1 : 0;
var count3 = /[A-Z]/.test(pwdVal) ? 1 : 0;
var count = count1 + count2 + count3;
// 判断是否为空
if (/^.{0}$/.test(pwdVal)) {
msg($(‘#pswSpan‘), ‘输入不能为空‘, ‘red‘);
return
}
// 判断长度 6-12
if (!(/^.{6,12}$/.test(pwdVal))) {
msg($(‘#pswSpan‘), ‘长度不对‘, ‘red‘);
return
}
// 不能有非法字符
if (/\W/.test(pwdVal)) {
msg($(‘#pswSpan‘), ‘只能数字字母组合不能包含非法字符‘, ‘red‘);
return
}
if (count == 1) {
msg($(‘#pswSpan‘), ‘密码强度低‘, ‘red‘);
}
else if (count == 2) {
msg($(‘#pswSpan‘), ‘密码强度中等‘, ‘yellow‘);
}
else if (count == 3) {
msg($(‘#pswSpan‘), ‘密码强度高‘, ‘green‘);
}
}
//验证码框
$(‘#passcode‘).onblur = function () {
var codeVal = this.value;
// if (/^.{0}$/.test(codeVal)) {
// msg($(‘#psSpan‘), ‘验证码不能为空‘, ‘red‘);
// }
//验证码不区分大小写，把验证码输入框的值和验证码的值同时转小写
if (codeVal.toLowerCase() === $(‘#showCode‘).innerHTML.toLowerCase()) {
msg($(‘#psSpan‘), ‘验证成功‘, ‘green‘)
//验证成功，点击注册按钮跳转页面
$(‘#btn‘).onclick = function () {
location.href = ‘https://www.baidu.com/‘
}
} else {
msg($(‘#psSpan‘), ‘验证码输入有误‘, ‘red‘)
}
}
//验证码
function randCode(n) {
n = n || 4
var str = ‘‘
for (let index = 0; index < n; index++) {
str += arr[rand(0, arr.length)]
} return str
}
function $(e) {
return document.querySelector(e)
}
// 产生某个区间的随机数 取不到最大值
function rand(min, max) {
return parseInt(Math.random() * (max - min) + min)
}
//表单验证提示信息，ele对象，str提示信息，color提示信息的颜色
function msg(ele, str, color) {
ele.innerHTML = str
ele.style.color = color
}
</script>
</body>
</html>
