TextArea JavaScript验证：模拟CSS伪类+正则实现内容校验

实现方案 #

针对textarea不支持pattern属性的问题，我们可以通过JS绑定blur事件触发正则校验，用自定义状态类模拟:user-valid/:user-invalid的视觉效果，和现有表单的校验样式保持统一。

1. 调整CSS样式 #

保留原有input的伪类样式，新增textarea的状态类样式，确保视觉效果一致：

.check_valid {
  border: 1px solid #ccc;
  padding: 8px;
  /* 基础样式可根据需求调整 */
}

/* 原生input的校验状态样式 */
.check_valid:user-valid {
  border: 2px solid #2ecc71; /* 绿色边框表示有效 */
}

.check_valid:user-invalid {
  border: 2px dashed #e74c3c; /* 红色虚线边框表示无效 */
}

/* textarea的模拟状态类，和原生伪类样式对齐 */
.check_valid.is-valid {
  border: 2px solid #2ecc71;
}

.check_valid.is-invalid {
  border: 2px dashed #e74c3c;
}

2. 完善JavaScript校验逻辑 #

给textarea绑定失去焦点事件，同时校验长度要求和内容正则，动态添加/移除状态类：

// 获取目标textarea（如果有多个，可改用querySelectorAll批量处理）
const targetTextarea = document.querySelector('.check_valid[name="content"]');
// 自定义校验正则，根据业务需求修改
const textareaRegex = /^[A-Za-z0-9\s,.!?]{5,200}$/; // 示例：允许字母、数字、空格、常用标点，长度5-200

// 核心校验函数
function validateTextarea(el) {
  // 先清除之前的状态类
  el.classList.remove('is-valid', 'is-invalid');

  const inputValue = el.value.trim();
  // 校验正则匹配 + 长度要求（和原生逻辑对齐）
  const isValid = textareaRegex.test(inputValue);

  // 添加对应状态类
  el.classList.add(isValid ? 'is-valid' : 'is-invalid');
}

// 绑定blur事件，失去焦点时触发校验
targetTextarea.addEventListener('blur', () => validateTextarea(targetTextarea));

// 可选：绑定input事件实现实时校验
// targetTextarea.addEventListener('input', () => validateTextarea(targetTextarea));

3. HTML结构示例 #

<form>
  <!-- 已有的input校验示例 -->
  <input type="text" class="check_valid" pattern="^[A-Za-z0-9]+$" minlength="3" required>
  
  <!-- 需要校验的textarea -->
  <textarea class="check_valid" name="content" minlength="5" maxlength="200" required></textarea>
</form>

关键说明 #

• 正则表达式textareaRegex可根据实际需求调整，比如限制特殊字符、要求包含特定格式内容等
• 如果有多个textarea需要校验，可通过document.querySelectorAll('.check_valid')遍历，给每个符合条件的textarea绑定事件
• 状态类的样式完全复用原生伪类的规则，保证整个表单的校验视觉风格统一
• 后端PHP校验仍保留，前端校验仅做用户体验优化

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