JavaScript表单验证问题求助及Vue混入改造指导

Hey there! Let's work through your form validation problems one by one—fixing that label error class bug, moving error messages below inputs, and turning this into a reusable Vue mixin for your project.

1. Fixing the Label Error Class Bug #

The error happens because input.closest('.el-form-item__label') can't find the label element. The label isn't an ancestor of the input (look at your HTML structure: the label is a direct child of .el-form-item, while the input lives inside .el-form-item__content).

Instead, first find the parent .el-form-item container, then query for the label inside it. Here's the corrected code snippet for that part:

// Replace your original label error code with this
const formItem = input.closest('.el-form-item');
if (formItem) {
  const label = formItem.querySelector('.el-form-item__label');
  if (label) {
    label.classList.add('err');
  }
}

Note: We add checks for formItem and label to avoid null errors if the DOM structure changes unexpectedly.

2. Moving Error Messages Below the Input #

To replace placeholder-based errors with a dedicated message below the input, first add an error container to your HTML:

<div class="el-form-item">
  <label for="streetAddress" class="el-form-item__label">Street Address</label>
  <div class="el-form-item__content">
    <div class="el-input">
      <input type="text" autocomplete="off" class="el-input__inner validate">
    </div>
    <!-- New error message container -->
    <div class="error-message" style="display: none; color: red; font-size: 12px; margin-top: 4px;"></div>
  </div>
</div>

Then update your validation function to use this container instead of changing the placeholder:

// Inside your validation loop, replace placeholder logic with this
const formItem = input.closest('.el-form-item');
const errorMsg = formItem?.querySelector('.error-message');

// Clear existing errors first (optional but recommended)
input.classList.remove('err');
if (formItem) {
  const label = formItem.querySelector('.el-form-item__label');
  label?.classList.remove('err');
}
errorMsg?.style.display = 'none';

// Run validation
if (input.value.trim().length === 0) {
  input.classList.add('err');
  if (formItem) {
    const label = formItem.querySelector('.el-form-item__label');
    label?.classList.add('err');
  }
  if (errorMsg) {
    errorMsg.textContent = "Kindly enter a value";
    errorMsg.style.display = "block";
  }
  input.focus();
  break;
}

This way, errors are clearly displayed below the input instead of overriding the placeholder.

3. Converting to a Vue Mixin #

Since you're working with Vue, we'll turn this into a reusable mixin that fits into Vue's lifecycle and component pattern. Here's the complete mixin:

export const formValidationMixin = {
  methods: {
    validateForm() {
      const validateElements = document.getElementsByClassName("validate");
      const inputs = Array.prototype.filter.call(validateElements, element => 
        ['INPUT', 'TEXTAREA'].includes(element.nodeName) // Extendable for other elements
      );
      let isValid = true;

      inputs.forEach(input => {
        const formItem = input.closest('.el-form-item');
        const label = formItem?.querySelector('.el-form-item__label');
        const errorMsg = formItem?.querySelector('.error-message');

        // Clear previous error state
        input.classList.remove('err');
        label?.classList.remove('err');
        if (errorMsg) {
          errorMsg.textContent = "";
          errorMsg.style.display = "none";
        }

        // Validate empty value
        if (!input.value.trim()) {
          isValid = false;
          input.classList.add('err');
          label?.classList.add('err');
          if (errorMsg) {
            errorMsg.textContent = "Kindly enter a value";
            errorMsg.style.display = "block";
          }
          input.focus();
          return; // Stop at first invalid input
        }
      });

      return isValid;
    },
    // Helper to clear errors when user types
    clearInputError(inputElement) {
      const formItem = inputElement.closest('.el-form-item');
      const label = formItem?.querySelector('.el-form-item__label');
      const errorMsg = formItem?.querySelector('.error-message');

      inputElement.classList.remove('err');
      label?.classList.remove('err');
      if (errorMsg) {
        errorMsg.textContent = "";
        errorMsg.style.display = "none";
      }
    }
  },
  mounted() {
    // Add input event listeners to clear errors in real-time
    const validateInputs = document.querySelectorAll('.validate');
    validateInputs.forEach(input => {
      input.addEventListener('input', () => this.clearInputError(input));
    });
  },
  beforeUnmount() {
    // Clean up listeners to avoid memory leaks
    const validateInputs = document.querySelectorAll('.validate');
    validateInputs.forEach(input => {
      input.removeEventListener('input', () => this.clearInputError(input));
    });
  }
};

How to Use the Mixin: #

1. Import it into your Vue component:

import { formValidationMixin } from './path/to/mixin.js';

2. Add it to your component's mixins array:

export default {
  mixins: [formValidationMixin],
  methods: {
    handleSubmit() {
      if (this.validateForm()) {
        // Proceed with form submission
        console.log('Form is valid!');
      }
    }
  }
};

3. Call validateForm() when the user submits the form (e.g., on a button click with @click="handleSubmit").

Extending to Other Form Elements: #

To add support for selects or other elements, just update the filter condition in validateForm():

const inputs = Array.prototype.filter.call(validateElements, element => 
  ['INPUT', 'TEXTAREA', 'SELECT'].includes(element.nodeName)
);

You can also adjust the validation logic for specific element types (e.g., check if a select's value is not an empty string).

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