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() 比任何正则都更稳妥。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！