如何在HTML表单验证中整合自定义密码验证函数？

Great question! To hook your custom password validation into HTML5's native form validation process, you'll want to use the Constraint Validation API—this lets you mark the field as invalid (and set custom error messages) that play nicely with HTML5's built-in validation UI. Here's how to adjust your code:

Step 1: Update Your Custom Validation Function #

Modify your checkPsw function to set a custom validity message on the password field. This tells the browser whether the field meets your custom rules, and what error to show if it doesn't.

function checkPsw() {
  var pswd = $(this).val();
  var errorMessage = "";
  
  // Reset validity state first
  this.setCustomValidity("");

  // Validate minimum length
  if (pswd.length < 8) {
    errorMessage = "Password must be at least 8 characters long.";
    $('#length').addClass('invalid'); // Highlight the failed criterion
  } else {
    $('#length').removeClass('invalid');
  }

  // Add other validation criteria (example: uppercase letter)
  if (errorMessage === "" && !/[A-Z]/.test(pswd)) {
    errorMessage = "Password must include at least one uppercase letter.";
    $('#uppercase').addClass('invalid');
  } else if (/[A-Z]/.test(pswd)) {
    $('#uppercase').removeClass('invalid');
  }

  // Add other criteria like numbers or special characters here
  if (errorMessage === "" && !/[0-9]/.test(pswd)) {
    errorMessage = "Password must include at least one number.";
    $('#number').addClass('invalid');
  } else if (/[0-9]/.test(pswd)) {
    $('#number').removeClass('invalid');
  }

  // Set custom validity (empty string = field is valid)
  this.setCustomValidity(errorMessage);

  // Optional: Update password info box styling
  $('#pswd_info').toggleClass('error', !!errorMessage);
}

Step 2: Hook into Form Submission & Field Events #

Ensure your validation runs whenever the user interacts with the password field or tries to submit the form. This keeps your custom checks in sync with HTML5's native flow.

$(document).ready(function() {
  var $passwordField = $('#myaccount-password');
  
  // Existing handlers + blur to trigger validation when leaving the field
  $passwordField
    .keyup(checkPsw)
    .focus(function() { $('#pswd_info').show(); })
    .blur(function() { 
      $('#pswd_info').hide();
      checkPsw.call(this); // Run validation on field exit
    });

  // Handle form submission
  $('#myForm').submit(function(e) {
    // Trigger password validation
    checkPsw.call($passwordField[0]);
    
    // Check if the entire form is valid (includes HTML5 validation on other fields)
    if (!this.checkValidity()) {
      e.preventDefault(); // Stop form submission
      e.stopPropagation();
      
      // Show password info if password is invalid
      if ($passwordField[0].validity.customError) {
        $('#pswd_info').show();
      }
    }
    
    // Add validation state class (for Bootstrap or custom CSS)
    this.classList.add('was-validated');
  });
});

Step 3: Prepare Your HTML #

Make sure your form and fields include necessary HTML5 attributes to enable native validation alongside your custom rules:

<form id="myForm" novalidate>
  <!-- Example of a field using HTML5 validation -->
  <input type="email" name="email" required placeholder="Your email">
  
  <input type="password" id="myaccount-password" name="password" required placeholder="Your password">
  
  <div id="pswd_info">
    <h4>Password requirements:</h4>
    <ul>
      <li id="length">At least 8 characters</li>
      <li id="uppercase">One uppercase letter</li>
      <li id="number">One number</li>
    </ul>
  </div>
  
  <button type="submit">Create Account</button>
</form>

Key Notes: #

• setCustomValidity(): This is the core of integrating with HTML5 validation. An empty string marks the field as valid; any non-empty string marks it as invalid and sets the error message the browser will display.
• checkValidity(): Calling this on the form checks all fields (native and custom) for validity. If any field fails, it returns false and blocks submission.
• Consistent UI: The browser will show your custom error message in its native validation tooltip (you can style this with CSS if you want a custom look).

This approach ensures your custom password rules work seamlessly with HTML5's built-in validation, giving users a consistent and intuitive experience.

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