<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>
<input type="text" id="input1">
<span id="span1">请输入6到12位数字字母的用户名</span>
</p>
<p>
<input type="text" id="input2">
<span id="span2">请输入6到12位数字字母的密码</span>
</p>
<p>
<input type="text" id="input3">
<span id="span3"></span>
</p>
<p>
<button id="btn">注册</button>
</p>
<script>
var number = []
for (var i = 0; i < 10; i++) {
number.push(i + '') //数字转成字符串
}
console.log(number)
var small = []
for (var i = 97; i <= 122; i++) {
//把数字转成字符
var str = String.fromCharCode(i)
small.push(str)
}
console.log(small)
var big = []
for (var i = 65; i <= 90; i++) {
var str = String.fromCharCode(i)
big.push(str)
}
console.log(big)
//包含了数字小写和大写字母的数组
var bigArr = number.concat(small, big)
console.log(bigArr)
//-------------------------------------------------------------------------------------------------
$('span3').innerHTML = isSce()
$('span3').onclick = function () {
$('span3').innerHTML = isSce()
}
$('btn').onclick = function () {
//判断用户名的正确性
//判断用户名是否为空
var input1val = $('input1').value
if (!input1val) {
$('span1').innerHTML = '用户名不能为空'
$('span1').style.color = 'red'
return
}
//用户民的长度
if (input1val.length < 6 || input1val.length > 12) {
$('span1').innerHTML = '用户名长度为6到12位'
$('span1').style.color = 'red'
return
}
//判断用户民的开头是不不是字母开头
for (var i = 0; i < number.length; i++) {
if (input1val[0] === number[i]) {
$('span1').innerHTML = '用户名的开头不能是数字'
$('span1').style.color = 'red'
return
}
}
//判断用户名是不是以数字字母组成的用户名
for (var i = 0; i < input1val.length; i++) {
if (bigArr.indexOf(input1val[i]) == -1) {
$('span1').innerHTML = '用户名只能是数字加字母'
$('span1').style.color = 'red'
return //return不能方在for里不然，下面的代码不能执行
}
}
//全部合法后的提示
$('span1').innerHTML = '√'
$('span1').style.color = 'green'
//---------------------------------------------------------------------------------------
var input2val = $('input2').value
//判断密码框输入的合法性
//判断是否为空
if (!input2val) { //为空的提示 if(input2val){} 判断不为空
$('span2').innerHTML = '输入不能为空'
$('span2').style.color = 'red'
return
}
//判断长度是否够
if (input2val.length < 6 || input2val.length > 12) {
$('span2').innerHTML = '密码是以6到12位的数字加字母组成'
$('span2').style.color = 'red'
return
}
//判断是不是都以数字加字母的组合
for (var i = 0; i < input2val.length; i++) {
if (bigArr.indexOf(input2val[i]) == -1) {
$('span2').innnerHTML = '密码是以6到12位的数字加字母组成'
$('span2').style.color = 'red'
return
}
}
//判断密码是不是以字母开头
for (var i = 0; i < number.length; i++) {
if (input2val[0] == number[i]) {
$('span2'), innerHTML = '密码是以字母开头'
$('span2').style.color = 'red'
return
}
}
$('span2').innerHTML = '√'
$('span2').style.color = 'green'
//----------------------------------------------------------------------------
//判断密码的强度
var count1 = 0
var count2 = 0
var count3 = 0
for (var i = 0; i < input2val.length; i++) {
if (number.includes(input2val[i])) {
count1 = 1
}
if (small.includes(input2val[i])) {
count2 = 1
}
if (big.includes(input2val[i])) {
count3 = 1
}
}
var count = count1 + count2 + count3
if (count == 1) {
$('span2').innerHTML = '密码强度弱'
$('span2').style.color = 'yellow'
} else if (count == 2) {
$('span2').innerHTML = '密码强度中'
$('span2').style.color = 'red'
} else {
$('span2').innerHTML = '密码强度强'
$('span2').style.color = 'green'
}
//判断验证码的正确性
var input3val = $('input3').value
if (input3val.toLowerCase() == $('span3').innerHTML.toLowerCase()) {
$('span3').innerHTML = '√'
$('span3').style.color = 'green'
} else {
$('span3').innerHTML = isSce()
}
}
//产生四位数包含数字小写字母和大写字母的验证码
function isSce(n) {
n = n || 4
var str = ''
str += number[rand(0, number.length - 1)]
str += small[rand(0, small.length - 1)]
str += big[rand(0, big.length - 1)]
for (var i = 0; i < n - 3; i++) {
var index = rand(0, bigArr.length - 1)
var b = bigArr[index]
str += b
}
//随机交换验证码的位置
//字符串转为数组
str = str.split('') //split里面不加''数组的长度有问题
for (var i = 0; i < str.length; i++) {
var index = rand(0, str.length - 1)
var t = str[i]
str[i] = str[index]
str[index] = t
}
//数组转为字符串
str = str.join('') //默认是以逗号链接，加''就不会以逗号链接
return str
}
//获取相关对象的函数
function $(id) {
return document.getElementById(id)
}
//随机数的函数
function rand(min, max) {
var a = Math.round(Math.random() * (max - min)) + min //可以取到最大数
return a
}
</script>
</body>
</html>
浙公网安备 33010602011771号