Bootstrap5 表单验证

Bootstrap 5 表单验证

学习如何使用Bootstrap 5的表单验证功能，创建健壮、用户友好的表单，确保数据准确性和完整性。

开始学习
邮箱地址有效！
请输入密码。
基础表单验证 自定义验证 服务器端验证 验证工具 浮动标签验证 输入框组验证 密码强度验证 实际应用示例

基础表单验证

使用Bootstrap 5内置的表单验证类和属性。

基础表单验证示例
看起来不错！
请输入您的名字。
看起来不错！
请输入您的姓氏。
@
请选择一个用户名。
请提供一个有效的城市。
请选择一个省份。
请提供一个有效的邮编。
您必须同意才能提交。 
<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="validationCustom01" class="form-label">名字</label>
    <input type="text" class="form-control" id="validationCustom01" required>
    <div class="valid-feedback">
      看起来不错！
    </div>
    <div class="invalid-feedback">
      请输入您的名字。
    </div>
  </div>
  <div class="mb-3">
    <label for="validationCustom02" class="form-label">姓氏</label>
    <input type="text" class="form-control" id="validationCustom02" required>
    <div class="valid-feedback">
      看起来不错！
    </div>
    <div class="invalid-feedback">
      请输入您的姓氏。
    </div>
  </div>
  <!-- 更多字段... -->
  <button class="btn btn-primary" type="submit">提交表单</button>
</form>

<script>
// 表单验证脚本
(function () {
  'use strict'

  // 获取所有需要验证的表单
  var forms = document.querySelectorAll('.needs-validation')

  // 循环并阻止提交
  Array.prototype.slice.call(forms)
    .forEach(function (form) {
      form.addEventListener('submit', function (event) {
        if (!form.checkValidity()) {
          event.preventDefault()
          event.stopPropagation()
        }

        form.classList.add('was-validated')
      }, false)
    })
})()
</script>

自定义验证

使用JavaScript创建自定义验证规则和消息。

自定义验证示例
请输入有效的邮箱地址。
请输入11位手机号码。
年龄必须在18到100岁之间。
请输入有效的URL地址。 
<form id="customValidationForm" class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="customEmail" class="form-label">邮箱地址</label>
    <input type="email" class="form-control" id="customEmail" required>
    <div class="invalid-feedback" id="emailError">
      请输入有效的邮箱地址。
    </div>
  </div>
  <div class="mb-3">
    <label for="customPhone" class="form-label">手机号码</label>
    <input type="tel" class="form-control" id="customPhone" pattern="[0-9]{11}" required>
    <div class="invalid-feedback">
      请输入11位手机号码。
    </div>
  </div>
  <!-- 更多字段... -->
  <button class="btn btn-primary" type="submit">提交表单</button>
</form>

<script>
// 自定义验证
document.getElementById('customValidationForm').addEventListener('submit', function(event) {
  event.preventDefault();
  event.stopPropagation();

  const form = event.target;
  const email = document.getElementById('customEmail');
  const emailError = document.getElementById('emailError');

  // 自定义邮箱验证
  if (!email.validity.valid) {
    emailError.textContent = '请输入有效的邮箱地址。';
  } else if (!email.value.includes('@example.com')) {
    email.setCustomValidity('只接受@example.com域名的邮箱');
    emailError.textContent = '只接受@example.com域名的邮箱';
  } else {
    email.setCustomValidity('');
  }

  if (form.checkValidity()) {
    // 表单验证通过，可以提交
    alert('表单验证通过！');
  }

  form.classList.add('was-validated');
});

// 实时验证
document.getElementById('customEmail').addEventListener('input', function() {
  this.setCustomValidity('');
});
</script>

服务器端验证

模拟服务器端验证和错误显示。

服务器端验证示例
<form id="serverValidationForm">
  <div class="mb-3">
    <label for="serverUsername" class="form-label">用户名</label>
    <input type="text" class="form-control" id="serverUsername">
    <div class="invalid-feedback" id="usernameServerError">
    </div>
  </div>
  <!-- 更多字段... -->
  <button type="submit" class="btn btn-primary" id="serverSubmitBtn">
    <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
    注册
  </button>
</form>

<script>
document.getElementById('serverValidationForm').addEventListener('submit', function(event) {
  event.preventDefault();

  const submitBtn = document.getElementById('serverSubmitBtn');
  const spinner = submitBtn.querySelector('.spinner-border');

  // 显示加载状态
  submitBtn.disabled = true;
  spinner.classList.remove('d-none');

  // 模拟服务器请求
  setTimeout(function() {
    // 重置表单状态
    resetServerValidation();

    // 模拟服务器响应
    const username = document.getElementById('serverUsername').value;
    const email = document.getElementById('serverEmail').value;
    const password = document.getElementById('serverPassword').value;
    const confirmPassword = document.getElementById('serverConfirmPassword').value;

    let hasErrors = false;

    // 模拟用户名检查
    if (username.length < 3) {
      showServerError('serverUsername', 'usernameServerError', '用户名至少需要3个字符');
      hasErrors = true;
    }

    // 模拟邮箱检查
    if (!email.includes('@')) {
      showServerError('serverEmail', 'emailServerError', '请输入有效的邮箱地址');
      hasErrors = true;
    }

    // 模拟密码检查
    if (password.length < 6) {
      showServerError('serverPassword', 'passwordServerError', '密码至少需要6个字符');
      hasErrors = true;
    }

    // 模拟确认密码检查
    if (password !== confirmPassword) {
      showServerError('serverConfirmPassword', 'confirmPasswordServerError', '两次输入的密码不一致');
      hasErrors = true;
    }

    // 恢复按钮状态
    submitBtn.disabled = false;
    spinner.classList.add('d-none');

    if (!hasErrors) {
      alert('注册成功！');
      // 在实际应用中，这里会提交表单或重定向
    }
  }, 1500);
});

function showServerError(inputId, errorId, message) {
  const input = document.getElementById(inputId);
  const error = document.getElementById(errorId);

  input.classList.add('is-invalid');
  error.textContent = message;
}

function resetServerValidation() {
  const inputs = document.querySelectorAll('#serverValidationForm input');
  inputs.forEach(input => {
    input.classList.remove('is-invalid');
  });
}
</script>

验证工具

使用Bootstrap的工具提示和其他工具增强验证体验。

工具提示验证示例
用户名必须包含3-20个字符，只能使用字母、数字和下划线。
请输入有效的邮箱地址。 
<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="tooltipUsername" class="form-label">
      用户名
      <span class="text-muted"
            data-bs-toggle="tooltip"
            data-bs-placement="top"
            title="用户名必须包含3-20个字符，只能使用字母、数字和下划线">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
          <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
          <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
        </svg>
      </span>
    </label>
    <input type="text" class="form-control" id="tooltipUsername" pattern="[a-zA-Z0-9_]{3,20}" required>
    <div class="invalid-feedback">
      用户名必须包含3-20个字符，只能使用字母、数字和下划线。
    </div>
  </div>
  <!-- 更多字段... -->
  <button class="btn btn-primary" type="submit">提交表单</button>
</form>

<script>
// 初始化工具提示
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>

浮动标签验证

将浮动标签与表单验证结合使用。

浮动标签验证示例
请输入有效的邮箱地址。
请输入密码。
请选择一个选项。 
<form class="needs-validation" novalidate>
  <div class="form-floating mb-3">
    <input type="email" class="form-control" id="floatingInputValidation" placeholder="name@example.com" required>
    <label for="floatingInputValidation">邮箱地址</label>
    <div class="invalid-feedback">
      请输入有效的邮箱地址。
    </div>
  </div>
  <div class="form-floating mb-3">
    <input type="password" class="form-control" id="floatingPasswordValidation" placeholder="密码" required>
    <label for="floatingPasswordValidation">密码</label>
    <div class="invalid-feedback">
      请输入密码。
    </div>
  </div>
  <div class="form-floating mb-3">
    <select class="form-select" id="floatingSelectValidation" required>
      <option selected disabled value="">请选择...</option>
      <option>选项一</option>
      <option>选项二</option>
      <option>选项三</option>
    </select>
    <label for="floatingSelectValidation">工作选项</label>
    <div class="invalid-feedback">
      请选择一个选项。
    </div>
  </div>
  <button class="btn btn-primary" type="submit">提交表单</button>
</form>

输入框组验证

将输入框组与表单验证结合使用。

输入框组验证示例
@
请选择一个用户名。
@example.com
请输入有效的邮箱地址。
$ .00
请输入有效的价格。 
<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="inputGroupUsername" class="form-label">用户名</label>
    <div class="input-group has-validation">
      <span class="input-group-text">@</span>
      <input type="text" class="form-control" id="inputGroupUsername" required>
      <div class="invalid-feedback">
        请选择一个用户名。
      </div>
    </div>
  </div>
  <div class="mb-3">
    <label for="inputGroupEmail" class="form-label">邮箱地址</label>
    <div class="input-group has-validation">
      <input type="email" class="form-control" id="inputGroupEmail" required>
      <span class="input-group-text">@example.com</span>
      <div class="invalid-feedback">
        请输入有效的邮箱地址。
      </div>
    </div>
  </div>
  <div class="mb-3">
    <label for="inputGroupPrice" class="form-label">价格</label>
    <div class="input-group has-validation">
      <span class="input-group-text">$</span>
      <input type="number" class="form-control" id="inputGroupPrice" min="0" step="0.01" required>
      <span class="input-group-text">.00</span>
      <div class="invalid-feedback">
        请输入有效的价格。
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">提交表单</button>
</form>

密码强度验证

创建密码强度指示器和验证。

密码强度验证示例
密码强度：非常弱
请输入密码。
两次输入的密码不一致。 
<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="passwordStrength" class="form-label">密码</label>
    <input type="password" class="form-control" id="passwordStrength" required>
    <div class="password-strength strength-0" id="passwordStrengthMeter"></div>
    <div class="form-text" id="passwordStrengthText">
      密码强度：非常弱
    </div>
    <div class="invalid-feedback">
      请输入密码。
    </div>
  </div>
  <div class="mb-3">
    <label for="confirmPassword" class="form-label">确认密码</label>
    <input type="password" class="form-control" id="confirmPassword" required>
    <div class="invalid-feedback" id="confirmPasswordError">
      两次输入的密码不一致。
    </div>
  </div>
  <button class="btn btn-primary" type="submit">提交表单</button>
</form>

<script>
document.getElementById('passwordStrength').addEventListener('input', function() {
  const password = this.value;
  const strengthMeter = document.getElementById('passwordStrengthMeter');
  const strengthText = document.getElementById('passwordStrengthText');

  let strength = 0;
  let feedback = '';

  // 检查密码长度
  if (password.length >= 8) strength++;
  else feedback = '密码至少需要8个字符。';

  // 检查是否包含小写字母
  if (/[a-z]/.test(password)) strength++;
  else if (!feedback) feedback = '密码应包含小写字母。';

  // 检查是否包含大写字母
  if (/[A-Z]/.test(password)) strength++;
  else if (!feedback) feedback = '密码应包含大写字母。';

  // 检查是否包含数字
  if (/[0-9]/.test(password)) strength++;
  else if (!feedback) feedback = '密码应包含数字。';

  // 检查是否包含特殊字符
  if (/[^A-Za-z0-9]/.test(password)) strength++;
  else if (!feedback) feedback = '密码应包含特殊字符。';

  // 更新UI
  strengthMeter.className = 'password-strength strength-' + strength;

  const strengthLabels = ['非常弱', '弱', '中等', '强', '非常强'];
  strengthText.textContent = '密码强度：' + strengthLabels[strength];

  if (feedback) {
    strengthText.textContent += ' - ' + feedback;
  }
});

document.getElementById('confirmPassword').addEventListener('input', function() {
  const password = document.getElementById('passwordStrength').value;
  const confirmPassword = this.value;
  const errorElement = document.getElementById('confirmPasswordError');

  if (password !== confirmPassword) {
    this.setCustomValidity('两次输入的密码不一致');
    errorElement.textContent = '两次输入的密码不一致';
  } else {
    this.setCustomValidity('');
  }
});
</script>

实际应用示例

在实际项目中使用表单验证的示例。

用户注册表单

用户注册

请输入您的名字。
请输入您的姓氏。
请输入有效的邮箱地址。
请输入11位手机号码。
请输入密码。
密码强度：非常弱
两次输入的密码不一致。
您必须同意才能注册。
已有账户？ 立即登录 
<div class="form-container">
  <h3 class="mb-4 text-center">用户注册</h3>

  <form id="registerForm" class="needs-validation" novalidate>
    <div class="row g-3">
      <div class="col-md-6">
        <div class="form-floating">
          <input type="text" class="form-control" id="registerFirstName" placeholder="名字" required>
          <label for="registerFirstName">名字</label>
          <div class="invalid-feedback">
            请输入您的名字。
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="form-floating">
          <input type="text" class="form-control" id="registerLastName" placeholder="姓氏" required>
          <label for="registerLastName">姓氏</label>
          <div class="invalid-feedback">
            请输入您的姓氏。
          </div>
        </div>
      </div>
      <!-- 更多字段... -->
    </div>

    <button class="btn btn-success w-100 mt-4 py-2" type="submit">注册账户</button>

    <div class="text-center mt-3">
      <span>已有账户？ <a href="#" class="text-decoration-none">立即登录</a></span>
    </div>
  </form>
</div>

<script>
// 密码强度检查
document.getElementById('registerPassword').addEventListener('input', function() {
  // 密码强度检查逻辑
});

// 确认密码检查
document.getElementById('registerConfirmPassword').addEventListener('input', function() {
  // 确认密码检查逻辑
});

// 表单提交
document.getElementById('registerForm').addEventListener('submit', function(event) {
  // 表单验证逻辑
});
</script>
上一章: 表单浮动标签 已是最后一章