如何为表单各类输入字段做验证？textarea替代checkValidity方案咨询

一、除checkValidity外的可用验证方法 #

• 自定义正则匹配：就是你尝试的思路，核心是用正则校验内容格式，灵活度最高
• 基于字符长度的验证：直接判断value.length，适合限制输入字数的场景
• 结合HTML5原生属性：比如给textarea加pattern、required，再配合自定义逻辑处理样式和提示，比纯原生验证更可控

二、修复你写的验证函数（解决事件未触发问题） #

你的正则逻辑本身没问题，事件没触发大概率是没给textarea绑定正确的事件监听，而且原函数也没处理添加invalid类和错误提示的逻辑。下面是补全后的可用版本：

// 完整的textarea验证函数
function validateTxt(textArea) {
  const reg = /^[a-zA-Z0-9]+$/; // 用正则字面量更简洁
  const inputValue = textArea.value.trim(); // 先去掉首尾空格再验证
  const isValid = reg.test(inputValue);

  if (!isValid) {
    // 添加invalid类
    textArea.classList.add('invalid');
    // 处理错误提示：找textarea后面的提示元素，没有就创建
    let errorMsg = textArea.nextElementSibling;
    if (!errorMsg || !errorMsg.classList.contains('error-msg')) {
      errorMsg = document.createElement('span');
      errorMsg.classList.add('error-msg');
      textArea.parentNode.appendChild(errorMsg);
    }
    errorMsg.textContent = '只能输入字母和数字';
    return false;
  } else {
    // 验证通过时清理样式和提示
    textArea.classList.remove('invalid');
    const errorMsg = textArea.nextElementSibling;
    if (errorMsg && errorMsg.classList.contains('error-msg')) {
      errorMsg.textContent = '';
    }
    return true;
  }
}

// 绑定事件，确保验证触发
// 场景1：输入过程中实时验证
const targetTextarea = document.querySelector('textarea');
targetTextarea.addEventListener('input', function() {
  validateTxt(this);
});

// 场景2：表单提交时验证（阻止非法提交）
const form = document.querySelector('form');
form.addEventListener('submit', function(e) {
  if (!validateTxt(targetTextarea)) {
    e.preventDefault(); // 不让表单提交
  }
});

三、其他实用验证示例 #

1. 字符长度限制验证 #

function validateTxtLength(textArea) {
  const minLen = 5;
  const maxLen = 100;
  const inputVal = textArea.value.trim();
  if (inputVal.length < minLen || inputVal.length > maxLen) {
    textArea.classList.add('invalid');
    // 这里可以添加对应错误提示
    return false;
  }
  textArea.classList.remove('invalid');
  return true;
}

2. 结合HTML5 pattern属性的验证 #

先给textarea加原生属性：

<textarea pattern="[a-zA-Z0-9]+" required placeholder="请输入内容"></textarea>

然后用自定义函数处理样式和提示：

function validateTxtWithPattern(textArea) {
  if (!textArea.validity.valid) {
    textArea.classList.add('invalid');
    // 根据不同错误类型显示提示
    if (textArea.validity.patternMismatch) {
      // 显示格式错误提示
    } else if (textArea.validity.valueMissing) {
      // 显示必填提示
    }
    return false;
  }
  textArea.classList.remove('invalid');
  return true;
}

内容的提问来源于stack exchange，提问作者code-daily