应通过正则匹配四类字符（小写、大写、数字、符号）出现种类数判断强度：两类为“中”，三类及以上为“强”，并结合实时input事件+防抖更新UI提示条，而非依赖form.verify提交校验。
密码强度判断逻辑怎么写才靠谱
直接用正则匹配字符类型组合是最常用也最可控的方式，别依赖第三方库或模糊的“长度 > 8 就算强”这种规则。Layui 本身不提供密码强度计算，得自己实现 checkPasswordStrength 这类函数。
常见错误是只看长度，结果 "aaaaaaaa" 被判为“强”，或者忽略中文、空格等合法输入导致误判。实际应检查四类字符是否至少出现两类（小写+数字）、三类（再加大小写/符号）、四类全齐才算“强”。
- 小写字母：
/[a-z]/ - 大写字母：
/[A-Z]/ - 数字：
/d/ - 特殊符号：
/[!@#$%^&*()_+-=[]{};':"\|,./?]/
示例函数：
function checkPasswordStrength(pwd) {
let score = 0;
if (/[a-z]/.test(pwd)) score++;
if (/[A-Z]/.test(pwd)) score++;
if (/d/.test(pwd)) score++;
if (/[^a-zA-Zds]/.test(pwd)) score++; // 更宽松的符号匹配
if (pwd.length < 6) return '弱';
if (score === 1 || score === 2) return '弱';
if (score === 3) return '中';
if (score === 4 && pwd.length >= 8) return '强';
return '中';
}
Layui 表单里怎么动态插入强度提示条
不能直接往 layui.form().render() 渲染后的 .layui-input 里塞 DOM，得在原 HTML 中预留容器，或用 jQuery 动态追加——推荐后者，更灵活。
关键点：必须绑定在 input 的 input 事件（不是 blur），否则用户打字时看不到实时反馈；同时要防抖，避免高频触发影响性能。
- 给密码框加唯一
id或class，比如id="pwd-input" - 在它下方插入一个
<div id="pwd-strength"></div> - 用
layui.util.throttle包一层判断函数，300ms 内只执行最后一次
简短实操代码：
$('#pwd-input').on('input', layui.util.throttle(function() {
const pwd = $(this).val();
const level = checkPasswordStrength(pwd);
const $bar = $('#pwd-strength');
$bar.removeClass('weak medium strong').text(level);
if (level === '弱') $bar.addClass('weak');
else if (level === '中') $bar.addClass('medium');
else if (level === '强') $bar.addClass('strong');
}, 300));
CSS 样式怎么配才不破坏 Layui 布局
直接写 width: 100% 容易撑破表单行高，要用 margin-top 下移 + font-size 控制文字大小，且必须加 display: inline-block 防止换行错位。
容易踩的坑：没重置 line-height 导致提示文字和输入框底部不对齐；用了 position: absolute 后父容器没设 position: relative，结果提示条飘到页面角落。
- 推荐高度固定为
20px，和 Layui 默认输入框行高一致 - 颜色用
color: #999（弱）、#FF9900（中）、#009688（强）——和 Layui 主题色协调 - 不要用
float，改用margin-top: 5px微调位置
最小可用样式：
#pwd-strength {
height: 20px;
line-height: 20px;
font-size: 12px;
margin-top: 5px;
display: inline-block;
}
#pwd-strength.weak { color: #999; }
#pwd-strength.medium { color: #FF9900; }
#pwd-strength.strong { color: #009688; }
为什么 form.verify 自定义校验不适合做强度提示
form.verify 是提交时触发的同步校验，只返回布尔或报错信息，没法实时更新 UI。你把它写进验证规则里，用户输完点提交才看到“密码强度不足”，体验断层。
真实场景需要的是「边输边提示」，而不是「提交才拦截」。两者目的不同：一个是交互反馈，一个是业务约束。
- 如果真要在提交前强制强度达标，应在
form.on('submit(...)')里手动调用checkPasswordStrength并return false - 但强度提示条本身和
form.verify无关，硬绑在一起反而让逻辑混乱 - 某些人把强度判断写成
form.verify的一条规则，结果输入过程完全无反馈，还误以为功能坏了
复杂点在于：强度判定规则可能随后台要求变化（比如某项目强制要求含符号），这时候要把 checkPasswordStrength 抽成独立模块，别散落在事件绑定里。
