Vue—— Vue 3 + Element Plus 表单输入校验和自动格式化工具函数详解

// 表单校验规则定义
const validationRules = {
  // 手机号码校验
  phone: {
    pattern: /^1[3-9]\d{9}$/,
    message: '请输入正确的手机号码'
  },
  
  // 邮箱校验
  email: {
    pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
    message: '请输入正确的邮箱地址'
  },
  
  // 用户名校验（4-16位字母、数字、下划线）
  username: {
    pattern: /^[a-zA-Z0-9_]{4,16}$/,
    message: '用户名必须是4-16位字母、数字或下划线'
  }
};

/**
 * 为输入元素设置默认属性
 * @param {HTMLElement} element - 表单元素
 */
function setInputDefaults(element) {
  const tagName = element.tagName.toLowerCase();
  const type = element.type;

  // 已经处理过的元素跳过
  if (element._processed) return;

  if (tagName === 'input') {
    // 为文本输入框添加默认最大长度和占位符
    if (type === 'text' && !element.hasAttribute('maxlength')) {
      element.setAttribute('maxlength', '100');
      if (!element.hasAttribute('placeholder')) {
        element.setAttribute('placeholder', '请输入内容');
      }
    }
    
    // 为数字输入框添加最大值限制
    if (type === 'number' && !element.hasAttribute('max')) {
      element.setAttribute('max', '999999999');
    }
  }

  if (tagName === 'textarea' && !element.hasAttribute('maxlength')) {
    element.setAttribute('maxlength', '500');
    element.setAttribute('rows', '4');
    if (!element.hasAttribute('placeholder')) {
      element.setAttribute('placeholder', '请输入内容');
    }
  }

  // 标记为已处理
  element._processed = true;
}

/**
 * 显示校验错误信息
 * @param {HTMLElement} element - 表单元素
 * @param {string} message - 错误信息
 */
function showValidationError(element, message) {
  // 移除已有错误提示
  removeValidationError(element);

  // 创建错误提示元素
  const errorDiv = document.createElement('div');
  errorDiv.className = 'validation-error';
  errorDiv.textContent = message;
  errorDiv.style.cssText = `
    color: #ff4d4f;
    font-size: 12px;
    margin-top: 4px;
  `;

  // 高亮错误字段
  element.style.borderColor = '#ff4d4f';

  // 插入错误提示
  element.parentNode.appendChild(errorDiv);
  element._errorElement = errorDiv;
}

/**
 * 移除校验错误信息
 * @param {HTMLElement} element - 表单元素
 */
function removeValidationError(element) {
  if (element._errorElement) {
    element._errorElement.remove();
    element._errorElement = null;
    element.style.borderColor = '';
  }
}

/**
 * 添加输入校验功能
 * @param {HTMLElement} element - 表单元素
 */
function addInputValidation(element) {
  const dataType = element.getAttribute('data-type');
  
  if (!dataType || !validationRules[dataType]) return;

  // 创建校验处理函数
  const validationHandler = (event) => {
    const value = event.target.value.trim();
    
    // 移除之前错误提示
    removeValidationError(element);

    // 空值不校验
    if (!value) return;

    const rule = validationRules[dataType];
    if (!rule.pattern.test(value)) {
      showValidationError(element, rule.message);
    }
  };

  // 绑定事件
  element.addEventListener('blur', validationHandler);
  element.addEventListener('input', validationHandler);
  
  // 保存引用便于清理
  element._validationHandler = validationHandler;
}

/**
 * 初始化表单校验功能
 */
export function initFormValidation() {
  // 使用 MutationObserver 监听 DOM 变化
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      if (mutation.type === 'childList') {
        mutation.addedNodes.forEach((node) => {
          if (node.nodeType === Node.ELEMENT_NODE) {
            // 处理新添加的表单元素
            if (isFormElement(node)) {
              setInputDefaults(node);
              addInputValidation(node);
            }
            
            // 处理子元素中的表单元素
            const formElements = node.querySelectorAll 
              ? node.querySelectorAll('input, textarea')
              : [];
              
            formElements.forEach((element) => {
              setInputDefaults(element);
              addInputValidation(element);
            });
          }
        });
      }
    });
  });

  // 开始观察 DOM 变化
  observer.observe(document.body, {
    childList: true,
    subtree: true
  });

  // 处理已存在的表单元素
  function processExistingElements() {
    const elements = document.querySelectorAll('input, textarea');
    elements.forEach((element) => {
      setInputDefaults(element);
      addInputValidation(element);
    });
  }

  // 页面加载完成后处理现有元素
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', processExistingElements);
  } else {
    processExistingElements();
  }
}

/**
 * 判断是否为表单元素
 * @param {HTMLElement} element - 元素
 * @returns {boolean}
 */
function isFormElement(element) {
  const tagName = element.tagName.toLowerCase();
  return tagName === 'input' || tagName === 'textarea';
}

<input type="text" data-type="phone" />
<input type="text" data-type="email" />
<textarea data-type="username"></textarea>