用户名验证
<!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>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通