用户名验证
2021/5/7 18:57:44
本文主要是介绍用户名验证，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
<!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> <script src="../js/common.js"></script> </head>
<body> <div> <p> <label for="">用户名:</label> <input id="user" type="text"> <span id="user_tips"></span> </p> <p> <label for="">密 码:</label> <input id="pwd" type="text"> <span id="pwd_tips"></span> </p> <p> <label for="">确 认:</label> <input id="repwd" type="text"> <span id="repwd_tips"></span> </p> <p> <label for="">验证码:</label> <input id="code" type="text"> <span id="codeSpan">1111</span> <span id="code_tips"></span> </p> <p><input id="btn" type="submit" value="注册"></p> </div> </body> <script> // 获取元素 点击时验证 结果=>span(提示消息)
// 用户名 // 由数字 大小写字母 _ $ 组成 , 6-12位,且不能以数字开头
// 判断的流程 从易到难的顺序 // a. 长度 6-12位 // b. 不能以数字开头 // c. 由数字 大小写字母 _ $ 组成 (所有的字符都必须在合法字符的范围内,只要有一个不是合法的字符 报错 => 判断字符串中是否能含有非法字符)
// 密码 // 由数字 大小写字母 _ 6-12位
// 判断密码强度 // 数字,大写,小写,特殊字符 中 只出现一种 11111 aaaaaa AAAAAA 弱 // 数字,大写,小写,特殊字符 中 出现2种 中 // 数字,大写,小写,特殊字符 中 出现3种 强 // 数字,大写,小写,特殊字符 中 出现4种 超强
// 是否存在数字 / 大写 /小写 / 特殊字符
// true + true + true + false => 3
// 确认密码 // 和密码相同
// 验证码 // 1. 页面加载时,随机生成四个不重复的验证码 (0-9 a-z A-Z ) // 2. 点击 验证码 进行切换 // 3. 验证码输入判断 (输入的 随机生成的 保持一致)
var userInp = document.getElementById("user"); var userTips = document.getElementById("user_tips");
var pwdInp = document.getElementById("pwd"); var pwdTips = document.getElementById("pwd_tips");
var repwdInp = document.getElementById("repwd"); var repwdTips = document.getElementById("repwd_tips");
var codeInp = document.getElementById("code"); var codeTips = document.getElementById("code_tips");
var codeSpan = document.getElementById("codeSpan"); var btn = document.getElementById("btn");
codeSpan.innerText = randCode(); codeSpan.onclick = function () { codeSpan.innerText = randCode(); }
btn.onclick = function () { var user = userInp.value; var pwd = pwdInp.value; var repwd = repwdInp.value; var code = codeInp.value; console.log(user); // 1. 8-20 位 length if (user.length >= 6 && user.length <= 12) { // 2. 是否以数字开头 验证开头(第一个字符是不是数字) // var firstChar = user.charAt(0); // console.log(firstChar);
// (1) isNaN(firstChar) 非数字:true 数字:false // (2) var numList = ["1","2",..."9"] 非数字: list.indexOf() ==-1 // (3) var firstCode = user.charCodeAt(0); 数字: 48-57
var firstCode = user.charCodeAt(0); console.log(firstCode);
if (!(firstCode >= 48 && firstCode <= 57)) { // userTips.innerText = "√"; // userTips.style.color = "green"; // userTips.style.fontSize = "12px"; // debugger; // 3. 由数字,字母(A a),下划线组成 (不允许使用的字符 => 非法字符) => 每一个字符串都要是合法的 不能有非法字符 => 是否存在非法字符 var flag = true; // 假设全都是合法的 => 遍历每一个字符找非法 for (var i = 0; i < user.length; i++) { var char = user.charAt(i); if (normalList.indexOf(char) == -1) { // 不在normalList 就是非法字符 flag = false; // 存在非法字符 break; } } if (flag) { userTips.innerText = "√"; userTips.style.color = "green"; userTips.style.fontSize = "12px"; } else { userTips.innerText = "* 用户名由数字,字母,下划线组成"; userTips.style.color = "red"; userTips.style.fontSize = "12px"; }
} else { userTips.innerText = "* 用户名不能以数字开头"; userTips.style.color = "red"; userTips.style.fontSize = "12px"; }
} else { userTips.innerText = "* 用户名需要在6-12位之间"; userTips.style.color = "red"; userTips.style.fontSize = "12px";
}
// 1. 6-12 位 length // if (pwd) { // "" pwd必须由内容 if (pwd.length >= 6 && pwd.length <= 12) { var flag = true; // 假设全都是合法的 => 遍历每一个字符找非法 for (var i = 0; i < pwd.length; i++) { var char = pwd.charAt(i); if (normalList.indexOf(char) == -1) { // 不在normalList 就是非法字符 flag = false; // 存在非法字符 break; } } if (flag) {
var numFlag = false; var bigFlag = false; var smallFlag = false; var speFlag = false; for (var char of pwd) { if (numList.indexOf(char) != -1) { numFlag = true; } if (bigList.indexOf(char) != -1) { bigFlag = true; } if (smallList.indexOf(char) != -1) { smallFlag = true; } if (speList.indexOf(char) != -1) { speFlag = true; } }
var sum = numFlag + bigFlag + smallFlag + speFlag; console.log(sum);
var level = ""; switch (sum) { case 1: level = "弱"; break; case 2: level = "中"; break; case 3: level = "强"; break; case 4: level = "超强"; break; }
pwdTips.innerText = "密码强度:" + level; pwdTips.style.color = "green"; pwdTips.style.fontSize = "12px";
} else { pwdTips.innerText = "* 用户名由数字,字母,下划线组成"; pwdTips.style.color = "red"; pwdTips.style.fontSize = "12px"; }
} else { pwdTips.innerText = "* 用密码需要在6-12位之间"; pwdTips.style.color = "red"; pwdTips.style.fontSize = "12px"; } // }
if (pwd && repwd) { // 1&&2 ""&&2 // 确认密码 if (pwd == repwd) { repwdTips.innerText = "√"; repwdTips.style.color = "green"; repwdTips.style.fontSize = "12px"; } else { repwdTips.innerText = "* 密码不一致"; repwdTips.style.color = "red"; repwdTips.style.fontSize = "12px"; }
} else { repwdTips.innerText = "* 请输入完整内容"; repwdTips.style.color = "red"; repwdTips.style.fontSize = "12px"; }
// code if (code) { // 统一转小写 if (code.toLowerCase() == codeSpan.innerText.toLowerCase()) { codeTips.innerText = "√"; codeTips.style.color = "green"; codeTips.style.fontSize = "12px"; } else { codeTips.innerText = "* ×"; codeTips.style.color = "red"; codeTips.style.fontSize = "12px"; } } else { codeTips.innerText = "* 请输入验证码"; codeTips.style.color = "red"; codeTips.style.fontSize = "12px"; } }
</script>
</html>
这篇关于用户名验证的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-11-23Springboot应用的多环境打包入门
- 2024-11-23Springboot应用的生产发布入门教程
- 2024-11-23Python编程入门指南
- 2024-11-23Java创业入门：从零开始的编程之旅
- 2024-11-23Java创业入门：新手必读的Java编程与创业指南
- 2024-11-23Java对接阿里云智能语音服务入门详解
- 2024-11-23Java对接阿里云智能语音服务入门教程
- 2024-11-23JAVA对接阿里云智能语音服务入门教程
- 2024-11-23Java副业入门：初学者的简单教程
- 2024-11-23JAVA副业入门：初学者的实战指南
