jquery4 验证博客园用户注册页面

首先，你需要引入 jQuery 库。可以通过以下链接引入：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

然后，在页面加载完成后，你可以使用 jQuery 来为表单添加验证功能。以下是一个简单的示例：

<form id="register-form">
  <label>用户名：</label>
  <input type="text" name="username" required>

  <label>密码：</label>
  <input type="password" name="password" required>

  <label>确认密码：</label>
  <input type="password" name="confirm-password" required>

  <button type="submit">注册</button>
</form>

<script>
$(function() {
  // 获取表单元素
  var form = $('#register-form');
  var usernameInput = form.find('input[name="username"]');
  var passwordInput = form.find('input[name="password"]');
  var confirmPasswordInput = form.find('input[name="confirm-password"]');

  // 添加验证规则
  usernameInput.on('blur', function() {
    if (usernameInput.val() === '') {
      alert('用户名不能为空');
    }
  });

  passwordInput.on('blur', function() {
    if (passwordInput.val().length < 6) {
      alert('密码长度不能小于 6 位');
    }
  });

  confirmPasswordInput.on('blur', function() {
    if (confirmPasswordInput.val() !== passwordInput.val()) {
      alert('两次输入的密码不一致');
    }
  });

  // 提交表单时进行验证
  form.on('submit', function() {
    // 验证用户名
    if (usernameInput.val() === '') {
      alert('用户名不能为空');
      return false;
    }

    // 验证密码
    if (passwordInput.val().length < 6) {
      alert('密码长度不能小于 6 位');
      return false;
    }

    // 验证确认密码
    if (confirmPasswordInput.val() !== passwordInput.val()) {
      alert('两次输入的密码不一致');
      return false;
    }

    // 验证通过，提交表单
    alert('注册成功');
    return true;
  });
});
</script>

这个示例添加了三个验证规则：

- 用户名不能为空
- 密码长度不能小于 6 位
- 确认密码必须与密码一致

当用户离开输入框时，会触发相应的验证规则。如果验证未通过，则会弹出提示框。当用户点击注册按钮时，会再次进行验证，如果验证通过，则提交表单，否则不提交。