PHP新手Bootstrap表单开发：手机号仅允许数字与+号的验证实现求助

Hey there! Let's tackle that phone number validation issue you're facing. The type="tel" attribute doesn't actually enforce any formatting rules on its own—it just tells browsers to show a numeric keypad on mobile. To get the exact validation you want (allowing numbers, + sign, and optional spaces like +1 12345678 or +91 1234123123), we'll need to add three key tweaks to your code:

1. Update the HTML Phone Input #

First, modify your phone input field to include a regex pattern and clear validation messages. This lets Bootstrap use the pattern to validate on submit, and tells users exactly what format is expected.

Replace your current phone input code with this:

<div class="col-md-12 mb-3">
  <input class="form-control" type="tel" name="tel" placeholder="Phone" required 
         pattern="^\+?\d+(?:\s?\d+)*$" 
         title="Valid formats: +1 12345678, +91 1234123123. Only numbers, + sign, and optional spaces allowed.">
  <div class="valid-feedback">Phone field is valid!</div>
  <div class="invalid-feedback">Please enter a valid phone number. Use format like +1 12345678 (numbers, +, and optional spaces only).</div>
</div>

Regex Breakdown: #

• ^\+?: Optional + sign at the start
• \d+: At least one digit
• (?:\s?\d+)*: Optional space followed by digits, repeated any number of times (supports spaces between number segments)
• $: End of input

2. Enhance JavaScript Validation #

Next, update your Bootstrap validation JS to add custom checks (like preventing users from entering just a + sign) and real-time character filtering. This ensures users can't type invalid characters in the first place, and catches edge cases the regex might miss.

Replace your existing JS with this:

(function () {
  'use strict'
  const forms = document.querySelectorAll('.requires-validation')
  
  Array.from(forms).forEach(function (form) {
    // Get the phone input element
    const telInput = form.querySelector('input[name="tel"]');
    
    // Real-time filter: only allow numbers, +, and spaces
    if (telInput) {
      telInput.addEventListener('input', function(e) {
        this.value = this.value.replace(/[^+\d\s]/g, '');
      });
    }

    form.addEventListener('submit', function (event) {
      let isValid = true;

      // Custom phone number validation
      if (telInput) {
        const telValue = telInput.value.trim();
        
        // Prevent cases like just "+" or "+   "
        if (telValue === '+' || /^\+\s*$/.test(telValue)) {
          telInput.setCustomValidity('Phone number cannot be just a + sign.');
          isValid = false;
        } 
        // Recheck regex pattern (redundant but adds extra safety)
        else if (!/^\+?\d+(?:\s?\d+)*$/.test(telValue)) {
          telInput.setCustomValidity('Please use a valid format (e.g., +1 12345678).');
          isValid = false;
        } 
        // Clear validation error if all checks pass
        else {
          telInput.setCustomValidity('');
        }
      }

      // Prevent submit if any validation fails
      if (!isValid || !form.checkValidity()) {
        event.preventDefault();
        event.stopPropagation();
      }
      
      form.classList.add('was-validated');
    }, false);
  });
})()

Key Improvements: #

• Real-time filtering: Automatically removes any characters that aren't numbers, +, or spaces as the user types.
• Edge case handling: Catches invalid inputs like just a + sign (which would pass the regex but isn't a valid phone number).
• Clear error messages: Tells users exactly what's wrong with their input.

3. Test the Changes #

Once you've updated the HTML and JS, test these scenarios to make sure everything works:

• Try typing letters or symbols in the phone field—they should be removed immediately.
• Enter just a + sign and submit—you'll get an error message.
• Enter valid formats like +1 12345678 or +911234123123—they should pass validation.
• Leave the field blank—you'll get the "cannot be blank" error.

With these changes, your phone number validation will work exactly as you need it to, and integrate smoothly with your existing Bootstrap form setup.

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