分享JS表单验证源码（带错误提示及密码等级）

分享JS表单验证源码是一项非常实用的技能，让我们一步步来学习如何完成它。

1. 首先我们需要准备一个HTML表单。代码如下：

<form action="#" method="POST">
  <label>用户名：</label>
  <input type="text" name="username">
  <br><br>
  <label>密码：</label>
  <input type="password" name="password">
  <br><br>
  <label>确认密码：</label>
  <input type="password" name="repassword">
  <br><br>
  <button type="submit">提交</button>
</form>

1. 接下来我们需要编写JS代码来验证表单数据。代码如下：

// 获取表单元素
var form = document.querySelector('form');
var username = document.querySelector('input[name="username"]');
var password = document.querySelector('input[name="password"]');
var repassword = document.querySelector('input[name="repassword"]');

// 绑定表单提交事件
form.addEventListener('submit', function(e) {
  e.preventDefault();

  // 验证用户名
  if (username.value.trim() === '') {
    alert('用户名不能为空');
    username.focus();
    return false;
  }

  // 验证密码
  if (password.value.trim() === '') {
    alert('密码不能为空');
    password.focus();
    return false;
  }
  if (password.value !== repassword.value) {
    alert('密码不一致');
    repassword.focus();
    return false;
  }

  // 验证密码强度
  var level = getPassLevel(password.value);
  if (level < 2) {
    alert('密码强度太弱');
    password.focus();
    return false;
  }

  // 验证成功
  alert('提交成功');
});

// 获取密码强度等级
function getPassLevel(password) {
  var level = 0;
  if (/[a-zA-Z]+/.test(password)) {
    level++;
  }
  if (/[0-9]+/.test(password)) {
    level++;
  }
  if (/[^0-9a-zA-Z]+/.test(password)) {
    level++;
  }
  return level;
}

以上代码实现了以下验证功能：

• 验证用户名不能为空
• 验证密码不能为空
• 验证两次输入的密码是否一致

• 验证密码强度是否达到两级及以上

• 如果你希望在用户输入时，即时提示错误信息，可以使用以下代码：

username.addEventListener('input', function() {
  if (username.value.trim() === '') {
    showError(username, '用户名不能为空');
  } else {
    hideError(username);
  }
});

password.addEventListener('input', function() {
  if (password.value.trim() === '') {
    showError(password, '密码不能为空');
  } else if (password.value !== repassword.value) {
    showError(repassword, '密码不一致');
  } else {
    hideError(password);
    hideError(repassword);
  }

  var level = getPassLevel(password.value);
  if (level < 2) {
    showError(password, '密码强度太弱');
  } else {
    hideError(password);
  }
});

repassword.addEventListener('input', function() {
  if (password.value !== repassword.value) {
    showError(repassword, '密码不一致');
  } else {
    hideError(repassword);
  }
});

// 显示错误信息
function showError(element, message) {
  var parent = element.parentNode;
  var errorElement = parent.querySelector('.error-message');
  if (!errorElement) {
    var errorElement = document.createElement('span');
    errorElement.className = 'error-message';
    parent.appendChild(errorElement);
  }
  errorElement.innerText = message;
  parent.classList.add('has-error');
}

// 隐藏错误信息
function hideError(element) {
  var parent = element.parentNode;
  var errorElement = parent.querySelector('.error-message');
  if (errorElement) {
    errorElement.innerText = '';
    parent.classList.remove('has-error');
  }
}

以上代码实现了以下功能：

• 在用户输入用户名时，即时提示用户名不能为空
• 在用户输入密码和确认密码时，即时提示密码不一致
• 在用户输入密码时，即时提示密码的强度是否达标

示例1：当输入密码为 "12345" 时，即时提示密码强度太弱

示例2：当输入的用户名为空时，即时提示用户名不能为空