HTML中required属性才是原生非空校验的正确方式，pattern仅用于格式匹配；pattern不校验空值，必须搭配required和trim处理空格，JS中推荐value.trim()===""而非正则判空。
HTML 中根本没有正则表达式校验输入是否为空
HTML 表单的 required 属性才是原生“非空校验”的正确方式，pattern 属性虽然支持正则，但它的设计目标是格式匹配（比如手机号、邮箱），不是判空。用 pattern 去“校验是否为空”属于误用，且极易出错。
为什么 pattern=".*" 或 pattern=".{1,}" 不能可靠判空
这些正则看似“匹配至少一个字符”，但实际行为受 HTML 表单验证机制限制：
-
pattern只在输入值 非空时才触发 —— 如果用户没输任何内容，浏览器根本不会运行该正则，直接跳过校验 - 即使写
pattern="^.$"，空字符串也不会被它捕获，required缺失时照样提交成功 - 某些浏览器对空格处理不一致：用户只输空格，
pattern=".+"可能通过，但业务上这算“空”
真正有效的非空校验组合
必须搭配使用，缺一不可：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 加
required属性：强制浏览器在提交前检查是否为空（含纯空格） - 配合
oninput或onblur手动 trim 判空（防用户只输空格）：<input type="text" required oninput="this.value = this.value.trim()">
- 如需同时做格式校验（比如“非空且只能是数字”），再加
pattern：<input type="text" required pattern="[0-9]+" title="请输入数字">
注意：此时required仍负责空值拦截，pattern只管格式
JavaScript 手动校验时怎么用正则判空
如果绕过原生表单，自己用 JS 校验（比如在 submit 事件里），可以这样写：
立即学习“前端免费学习笔记（深入）”；
- 最简判断：
value.trim() === ""—— 推荐，语义清晰、性能好、无兼容问题 - 非要正则：
/^\s*$/.test(value)，匹配零个或多个空白字符（包括空格、制表、换行） - 注意别写成
/^$/.test(value)：它只匹配严格空字符串，对" "返回false，不符合业务中“空”的常见定义
真正容易被忽略的是空格边界情况 —— 用户粘贴过来的文本常带首尾不可见字符，trim() 比任何正则都更稳妥。
