如何验证使用Bootstrap 3创建的表单？含多字段规则校验需求

Got it, let's get your form up to spec with all the validation rules you need. I'll adjust your existing code, add the missing fields (like last name and state dropdown), and implement proper client-side validation that works seamlessly with Bootstrap 3.

Updated HTML Code #

<section>
  <div class="container form-container col-lg-12">
    <form class="form_data" role="form" id="needs-validation" novalidate>
      <h1 class="text-center">Contact us</h1>
      
      <!-- Email Field -->
      <div class="form-group center-block">
        <label for="input--email" class="form-labels">Email address</label>
        <input type="email" class="form-control form-control-lg" id="input--email" 
               aria-describedby="emailHelp" placeholder="norman-geller@email.com"
               required pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}">
        <small id="emailHelp" class="form-text text-muted">Please provide a valid email address. We won't share it with anybody! We promise :)</small>
        <div class="alert-feedback text-danger hidden">Please provide a valid email address.</div>
      </div>
      
      <!-- First Name (Only Letters) -->
      <div class="form-group center-block">
        <label for="input--firstname" class="form-labels">First Name</label>
        <input type="text" name="firstname" pattern="[a-zA-Z]+" class="form-control form-control-lg" 
               placeholder="Norman" required id="input--firstname">
        <div class="alert-feedback text-danger hidden">Please enter a first name using only letters.</div>
      </div>
      
      <!-- Last Name (Letters, Hyphens, Apostrophes) -->
      <div class="form-group center-block">
        <label for="input--lastname" class="form-labels">Last Name</label>
        <input type="text" name="lastname" pattern="[a-zA-Z'-]+" class="form-control form-control-lg" 
               placeholder="Geller" required id="input--lastname">
        <div class="alert-feedback text-danger hidden">Please enter a last name using only letters, hyphens, or apostrophes.</div>
      </div>
      
      <!-- US Zip Code -->
      <div class="form-group center-block">
        <label for="input--zip" class="form-labels">Zip Code</label>
        <input type="text" name="zipcode" pattern="^\d{5}(-\d{4})?$" class="form-control form-control-lg" 
               placeholder="10001 or 10001-1234" required id="input--zip">
        <div class="alert-feedback text-danger hidden">Please enter a valid US zip code (5 digits, or 5+4 digits).</div>
      </div>
      
      <!-- US State Dropdown -->
      <div class="form-group center-block">
        <label for="input--state" class="form-labels">State</label>
        <select class="form-control form-control-lg" id="input--state" required>
          <option value="">Select a state</option>
          <option value="AL">Alabama</option>
          <option value="AK">Alaska</option>
          <option value="AZ">Arizona</option>
          <!-- Add all 50 US states here -->
          <option value="WY">Wyoming</option>
        </select>
        <div class="alert-feedback text-danger hidden">Please select a state.</div>
      </div>
      
      <!-- Submit Button -->
      <div class="form-group center-block text-center">
        <button type="submit" class="btn btn-primary btn-lg">Submit</button>
      </div>
    </form>
  </div>
</section>

Key Fixes & Validation Breakdown #

Let's go through each change to match your requirements:

1. Email Validation #

• Added required to ensure the field isn't empty
• Added a pattern attribute to enforce a standard, valid email format (supports common characters like dots, hyphens, and plus signs)
• Updated the feedback message to be more specific about what counts as valid

2. First Name (Only Letters) #

• Renamed the field to firstname for clarity (since you specified separate name/last name rules)
• Kept pattern="[a-zA-Z]+" to restrict input strictly to uppercase/lowercase letters
• Added a targeted error message for invalid input

3. Last Name (Letters, Hyphens, Apostrophes) #

• Added this missing field per your requirements
• Used pattern="[a-zA-Z'-]+" to allow letters, apostrophes, and hyphens (no extra characters allowed)
• Marked as required to ensure it's not left blank

4. US Zip Code #

• Switched from type="number" to type="text" to preserve leading zeros (critical for valid zip codes like 00501, which would get truncated as 501 with number inputs)
• Used pattern="^\d{5}(-\d{4})?$" to support both standard 5-digit zip codes and the extended 5+4 format (e.g., 10001-1234)
• Updated the placeholder to show both valid formats

5. US State Dropdown #

• Added this missing dropdown per your requirements
• Set required and included a blank default option to force users to select a state
• Added a feedback message for when no state is chosen

Bootstrap 3 Validation Styling & JavaScript #

Bootstrap 3 doesn't have built-in validation classes like newer versions, so we'll add custom CSS and JS to handle error states and feedback:

Custom CSS #

/* Style invalid form controls to match Bootstrap's error scheme */
.form-control.invalid {
  border-color: #a94442;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}

/* Hide feedback messages by default */
.alert-feedback.hidden {
  display: none;
}

Validation JavaScript #

document.addEventListener('DOMContentLoaded', function() {
  const form = document.getElementById('needs-validation');
  
  form.addEventListener('submit', function(event) {
    event.preventDefault();
    resetValidationErrors(form);
    
    let isValid = true;
    const requiredFields = form.querySelectorAll('[required]');
    
    requiredFields.forEach(field => {
      if (!field.validity.valid) {
        markFieldAsInvalid(field);
        isValid = false;
      }
    });
    
    if (isValid) {
      // Submit the form (replace with AJAX if needed)
      form.submit();
    }
  });
  
  // Mark a field as invalid and show its feedback
  function markFieldAsInvalid(field) {
    field.classList.add('invalid');
    const feedback = field.nextElementSibling;
    if (feedback && feedback.classList.contains('alert-feedback')) {
      feedback.classList.remove('hidden');
    }
  }
  
  // Reset all error states and feedback messages
  function resetValidationErrors(form) {
    form.querySelectorAll('.invalid').forEach(field => field.classList.remove('invalid'));
    form.querySelectorAll('.alert-feedback').forEach(feedback => feedback.classList.add('hidden'));
  }
  
  // Clear errors when user starts typing/correcting input
  form.querySelectorAll('input, select').forEach(input => {
    input.addEventListener('input', function() {
      if (this.classList.contains('invalid')) {
        this.classList.remove('invalid');
        const feedback = this.nextElementSibling;
        if (feedback && feedback.classList.contains('alert-feedback')) {
          feedback.classList.add('hidden');
        }
      }
    });
  });
});

Why These Changes? #

• The CSS ensures invalid fields match Bootstrap 3's native error styling for consistency
• The JavaScript prevents form submission until all fields are valid, resets errors when users correct input, and shows specific feedback for each issue
• Using text for zip codes preserves leading zeros, which is a common pitfall with number inputs for US zip codes

内容的提问来源于stack exchange，提问作者mblancodev