jQuery 密码验证

注册与改密表单通常需要两件事：实时提示"密码强度"，以及校验"两次输入是否一致"。前者让用户知道密码够不够安全，后者防止输错。本节用 jQuery 监听 keyup 实时计算强度，并把逻辑封装成可复用的 $.fn.passwordStrength 插件，属于"手写一个小插件"的典型练习。

1. 页面结构

HTML 需要密码框、强度文字、强度条和确认密码框：

<style>
#bar { width: 200px; height: 12px; background: #eee; }
#bar i { display: block; height: 100%; width: 0; background: #ccc; }
</style>
<input type="password" id="pwd"><span id="tip"></span>
<div id="bar"><i></i></div>
<input type="password" id="pwd2" placeholder="再次输入密码">
<p id="same"></p>

2. 强度算法与实时提示

四项打分：长度 ≥6、含数字、含字母、含特殊符号，据此划分弱/中/强（以下脚本需放在 $(function(){}) 内或元素之后运行）：

$("#pwd").on("keyup", function () {
  var v = $(this).val(), score = 0;
  if (v.length >= 6) score++;
  if (/\d/.test(v)) score++;
  if (/[a-zA-Z]/.test(v)) score++;
  if (/[^0-9a-zA-Z]/.test(v)) score++;
  var text = ["", "弱", "中", "强", "很强"][score];
  var color = ["", "#f00", "#f90", "#0a0", "#06c"][score];
  $("#tip").text("强度：" + text);
  $("#bar i").css({ width: score * 25 + "%", background: color });
});
// 效果：输入 abc 分数低，显示"强度：弱"红色短条；
// 输入 Abc123! 四项全满足，显示"强度：很强"，条变蓝色占满

3. 两次输入一致性校验

提交时比较两个密码框的值，不一致则提示并阻止提交：

$("form").submit(function () {
  if ($("#pwd").val() !== $("#pwd2").val()) {
    $("#same").text("两次输入的密码不一致").css("color", "red");
    return false;                 // 阻止表单提交
  }
  return true;
});
// 效果：两次密码不同就点"提交"，下方出现红色提示且表单不发送

4. 封装成插件

标准插件写法——参数合并、return this 支持链式调用，把强度逻辑收进 $.fn.passwordStrength：

$.fn.passwordStrength = function (tip, bar) {
  this.on("keyup", function () {
    var v = this.value, score = 0;
    if (v.length >= 6) score++;
    if (/\d/.test(v)) score++;
    if (/[a-zA-Z]/.test(v)) score++;
    if (/[^0-9a-zA-Z]/.test(v)) score++;
    tip.text("强度：" + ["", "弱", "中", "强", "很强"][score]);
    bar.css("width", score * 25 + "%");
  });
  return this;
};
$("#pwd").passwordStrength($("#tip"), $("#bar i"));
// 效果：初始化后与第 2 节行为一致；其它页面的密码框也可一行启用

5. 安全提醒

强度提示只改善体验，不能替代服务端校验：密码长度、复杂度与黑名单检查必须在后端再执行一遍，任何前端校验都能被绕过；同时建议密码输入框不要明文回显。

小结

密码验证 = 实时强度条 + 两次输入一致性检查；把算法封装成 $.fn.passwordStrength 后一处编写、处处复用，并牢记"前端管体验、后端管安全"的分工。