最终样式
我在该表单验证的外部创建了一个js文件,用来创建所需要的数字,大写,小写字母的集合,所以在html文件中还需要传入该文件
js中的strings.js的代码如下:
var lowCodeList=[]; //小写字母集合
var upperCodeList=[]; //大写字母集合
var numberList=[]; //数字集合
var otherList=["_","$"];//特殊字符,可随意添加
for(var i=97;i<(97+26);i++){
//ASII码小写字母从97开始,大写字母相对应的比其少32
lowCodeList.push(String.fromCharCode(i))
upperCodeList.push(String.fromCharCode(i-32));
}
for(var i=0;i<=9;i++){
numberList.push(i+'');
}
//创建一个大集合,包含以上几种字符,concat方法可以连接几个数组
var bigList=lowCodeList.concat(upperCodeList,numberList,otherList);
表单验证的代码如下:
<!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>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
input {
outline: none;
}
#myform {
width: 500px;
height: 400px;
background: rgb(171, 200, 224);
margin: 60px auto;
}
#username,
#password1,
#password2 {
margin-top: 40px;
width: 410px;
height: 30px;
background: rgb(213, 216, 216);
font-size: 18x;
line-height: 30px;
}
#userCode {
margin-top: 40px;
width: 100px;
height: 30px;
background: rgb(213, 216, 216);
font-size: 18x;
line-height: 30px;
}
#a {
margin-top: 40px;
display: inline-block;
width: 80px;
text-align: center;
height: 30px;
font-size: 18x;
line-height: 30px;
}
#btn {
margin-top: 20px;
width: 80px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 18x;
margin-left: 20px;
}
</style>
</head>
<body>
<div id="myform">
<span id="a">用户名:</span><input id="username" placeholder="由数字字母_$组成不能数字开头长度6到12位">
<span id="username_span"></span><br>
<span id="a">密码</span><input id="password1" placeholder="数字和字母组成长度6到10位"><br>
<span id="a">请重新输入</span><input id="password2"><span id="userpwd_span"></span><br />
<span id="a">验证码</span><input id="userCode"><span id="showCode"></span><span id="usercode_span"></span><br>
<button id="btn">登录</button><span id="good"></span>
</div>
</body>
<!-- 调用strings.js文件 -->
<script src="js/strings.js"></script>
<script>
//在js中通过各其对应的id值来找到对应的h5标签,并方便对其传入数据
var btnInput = document.getElementById("btn");
//找到用户名所需的标签
var usernameInput = document.getElementById("username");
var usernamespanInput = document.getElementById("username_span");
var goodInput = document.getElementById("good");
//找到密码所需的标签
var password1Input = document.getElementById("password1");
var password2Input = document.getElementById("password2");
var userpwdInput = document.getElementById("userpwd_span");
//找到验证码所需的标签
var userCodeInput = document.getElementById("userCode");
var showCodeInput = document.getElementById("showCode");
var userCodeInputs = document.getElementById("usercode_span");
//当登录按钮被点击时,触发以下事件
btnInput.onclick = function () {
isusername(); //调用用户名验证函数
ispassword(); //调用密码验证函数
iscode(); //调用验证码确认函数
//当以上3个函数都正确是,在goodInput所对应的标签中输入√,否则显示其他提示信息
if (isusername() && ispassword() && iscode()) {
goodInput.innerHTML = "√";
//goodInput所对应的标签的字体颜色样式
goodInput.style.color = "green"
} else {
goodInput.innerHTML = "请重新输入";
goodInput.style.color = "red"
}
}
//--------------------验证码-----------------
//使其在页面打开时就会随之生成长度为4的验证码
showCodeInput.innerHTML = randomList(4, bigList);
//当用户想更换验证码时,点击验证码所对应的showCodeInput标签即可
showCodeInput.onclick = function () {
showCodeInput.innerHTML = randomList(4, bigList);
}
//--------------------用户名验证-----------------
function isusername() {
//获取用户传入的用户名,并对其进行判断
var usernames = usernameInput.value;
//先对其长度进行判断,是否满足要求,若不满足,显示提示信息,并返回false,若满足,则进一步判断是否符合条件
if (usernames.length >= 6 && usernames.length <= 12) {
//获取该字符串的首字母
var first = usernames.charAt(0);
//如果该首字母,在数字的集合中存在即numberList.includes(first)为true,则说明首字母为数字,返回false,
//否则,首字母不为数字,继续进行判断
if (numberList.includes(first)) {
usernamespanInput.innerHTML = "首字母不能为数字,请重新输入";
usernamespanInput.style.color = "red";
return false;
} else {
//立一个旗帜,方便if操作
var flag = false;
// 从头到尾遍历用户名
for (var i = 0; i < usernames.length; i++) {
//判断是否有字符不在都满足条件的大数组bigList中,若不在,flag = true,立即退出循环
if (!bigList.includes(usernames.charAt(i))) {
flag = true;
break;
}
}
if (flag) {
//有不符合条件的字符
usernamespanInput.innerHTML = "您输入的组合不符合规范,请重新输入";
usernamespanInput.style.color = "red";
return false;
} else {
//以上三个条件全都符合,返回为true
usernamespanInput.innerHTML = "√";
usernamespanInput.style.color = "green";
return true;
}
}
} else {
usernamespanInput.innerHTML = "您输入的字符长度不够,请重新输入6-12位字符";
usernamespanInput.style.color = "red";
return false;
}
}
//--------------------密码-----------------
function ispassword() {
//获取所输入的两次密码
var password1 = password1Input.value;
var password2 = password2Input.value;
//若两次密码完全相同,再随意选一个进行判断是否满足应该满足的条件,否则,返回为false
if (password1 == password2) {
//判断密码的长度是否满足要求,若满足,继续进行一下判断
if (password1.length >= 6 && password2.length <= 10) {
//遍历密码中所有的字符,让其只能在大,小写字母或数字中存在,若三者都不存在,则中断循环
for (var i = 0; i < password1.length; i++) {
var key = password1.charAt(i);
if (lowCodeList.includes(key) ||
upperCodeList.includes(key) || numberList.includes(key)) {
} else {
break;
}
}
//此时i的长度不等密码字符串的长度,说明在for循环中提前退出了,有不符合条件的字符
if (i != password1.length) {
userpwdInput.innerHTML = "密码应该由字母和数字组成,请重新输入";
userpwdInput.style.color = "red";
return false;
} else {
//当密码的条件都符合时,可以判断密码的强度,当只有其中一种字符时,强度为弱,
//输入两种字符时强度为中,三种字符时,强度为强
var sum = 0;
var low = 0;
var upp = 0;
var num = 0;
//遍历密码中的字符
for (var i = 0; i < password1.length; i++) {
var keys = password1.charAt(i);
//3个if并列使用,保证其互不影响
if (lowCodeList.includes(keys)) {
low = 1;
}
if (upperCodeList.includes(keys)) {
upp = 1;
}
if (numberList.includes(keys)) {
num = 1;
}
}
//计算密码强度总和,并作出相应判断
sum = low + upp + num;
switch (sum) {
case 1:
userpwdInput.innerHTML = "<button style='width:40px;height:20px;background-color:green'>弱</button>";
break;
case 2:
userpwdInput.innerHTML = "<button style='width:40px;height:20px;background-color:green'></button><button style='width:40px;height:20px;background-color:green'>中</button>";
break;
case 3:
userpwdInput.innerHTML = "<button style='width:40px;height:20px;background-color:green'></button><button style='width:40px;height:20px;background-color:green'></button><button style='width:40px;height:20px;background-color:green'>强</button>";
break;
}
// 最后,所有条件都满足,返回true
return true;
}
} else {
userpwdInput.innerHTML = "密码的长度应为6-10,请重新输入";
userpwdInput.style.color = "red";
return false;
}
} else {
userpwdInput.innerHTML = "两次输入的密码不一致,请重新输入";
userpwdInput.style.color = "red";
return false;
}
}
//--------------------验证码的匹配-----------------
function iscode() {
//获取用户输入的验证码
var a = userCodeInput.value;
//获取showCodeInput标签中我们应该输入的验证码
var b = showCodeInput.innerHTML;
// 直接判断它们是否相等,若相等返回true
if (a.toUpperCase() == b.toUpperCase()) {
userCodeInputs.innerHTML = "√";
userCodeInputs.style.color = "green";
return true;
} else {
userCodeInputs.innerHTML = "验证码错误";
userCodeInputs.style.color = "red";
showCodeInput.onclick();
return true;
}
}
//--------------------验证码的生成-----------------
//随机生成验证码的函数,形参有验证码的长度,和一个数组
function randomList(leng, list) {
var result = '';
for (var i = 0; i < leng; i++) {
//随机生成0-所传入数组长度的随机数,取出该数组对应的字符,依次进行字符拼接
var code = Math.round(Math.random() * (list.length - 1));
result += list[code];
}
return result;
}
</script>
</html>
扫一扫
323
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
