表格中textarea正则验证须绑定oninput或onblur事件；其值需手动处理\r\n换行符，且pattern属性无效；应通过class批量绑定，并注意\s不匹配中文全角空格等Unicode空白。
表格内 <textarea></textarea> 的正则验证必须绑定 oninput 或 onblur，不能只靠 form submit
HTML 表格（<table>）本身不参与表单提交逻辑，里面嵌套的 <code><textarea></textarea> 只有在 <form></form> 内、且有 name 属性时，才会被序列化提交。但很多人把 <textarea></textarea> 放进 <td> 就以为“它自动属于表单”，结果验证逻辑没触发。
<p>真正起作用的是事件监听时机：</p>
<ul>
<li>
<code>oninput：适合实时校验（比如禁止输入 emoji 或控制长度），但要注意频繁触发可能卡顿
onblur：用户离开该文本域时校验，体验更轻量，适合格式类检查（如邮箱、URL）onsubmit（绑定在 <form></form> 上）：必须配合 return false 阻止默认提交，否则验证失败也照样发请求别漏掉：如果 <textarea></textarea> 在 <form></form> 外，form.onsubmit 根本捕获不到它的值 —— 它压根不会被提交。
textarea.value 获取的是换行符原样文本，正则里要显式处理 \n 和 \r\n
用户在 <textarea></textarea> 按 Enter 产生的换行，在 JS 中是 \n（Linux/macOS）或 \r\n（Windows）。如果你写 /^[a-zA-Z0-9]+$/ 去校验，哪怕只输一个字母加一次回车，.test() 就返回 false —— 因为字符串末尾多了 \n。
立即学习“前端免费学习笔记（深入）”；
常见处理方式：
- 校验前先
trim()：适用于“不允许首尾空白”的场景，但会吃掉用户有意保留的缩进 - 用
replace(/\r\n|\r|\n/g, '')清除所有换行再校验：适合纯内容字符限制（如“仅允许数字和字母”） - 正则本身兼容换行：比如
/^[a-zA-Z0-9\r\n]+$/，但注意这会让换行变成合法字符，需按业务判断是否合理
特别提醒：textarea 的 value 不受 HTML5 的 pattern 属性影响 —— <textarea pattern="[a-z]+"></textarea> 完全无效，必须用 JS 手动验证。
表格中多个 <textarea></textarea> 共享同一套正则时，别硬编码 ID，用 class + querySelectorAll 批量绑定
表格常有 N 行数据，每行一个 <textarea></textarea>（例如“备注”列），逐个写 getElementById('remark1')、getElementById('remark2')…不仅难维护，还容易漏绑或 ID 冲突。
更稳的做法：
- 统一加 class，比如
class="validate-alpha-numeric" - 用
document.querySelectorAll('textarea.validate-alpha-numeric')拿到 NodeList - 遍历绑定
onblur，并在 handler 里用this.value和this.nextElementSibling（或自定义data-error元素）定位错误提示位置
示例关键片段：
document.querySelectorAll('textarea.validate-alpha-numeric').forEach(el => {
el.addEventListener('blur', function() {
const isValid = /^[a-zA-Z0-9\s]*$/.test(this.value.replace(/\r\n|\r|\n/g, ''));
const errorEl = this.closest('td').querySelector('.error-msg');
if (errorEl) errorEl.style.display = isValid ? 'none' : 'inline';
});
});
中文、空格、制表符这些“看起来像空白”的字符，\s 并不完全覆盖
\s 在 JS 正则中只匹配 ASCII 空白：空格 、制表符 \t、换行 \n、回车 \r、垂直制表 \v、换页 \f。它不匹配中文全角空格（ ，Unicode \u3000）、不间断空格（ ，\u00a0）、零宽空格等。
如果你的业务允许用户粘贴 Word 文档内容，或从微信复制文字，就极可能混入这些字符。直接用 \s 会导致校验意外失败。
稳妥方案：
- 需要严格过滤：用
/^[a-zA-Z0-9\u4e00-\u9fa5\u3000\ta-zA-Z0-9\s]*$/显式列出允许的空白类型 - 需要宽松清洗：先
replace(/[\u3000\u00a0\u2000-\u200b\uFEFF]/g, ' ')把各种“伪空白”转成普通空格，再用\s - 校验前统一 normalize：对输入做
String.prototype.normalize('NFKC')，能合并多种 Unicode 表示形式（如全角数字转半角）
最易被忽略的一点：表格渲染时，<td> 默认 <code>white-space: normal，但用户看到的“空格效果”可能来自 CSS，而 JS 拿到的 value 是原始字符串 —— 视觉和数据永远不是一回事。
