html input 的 pattern 属性无法可靠校验百分比，应结合 javascript 实时校验：用正则 /^(0|([1-9]\d{0,1}|100)(.\d{1,2})?)%$/ 验证 0–100 范围、禁前导零、限小数位，并通过 input 事件 + setcustomvalidity 实时反馈，后端必须重复校验。
HTML input 的 pattern 属性不支持完整正则语法
直接在 <input type="text"> 里写 pattern="^([0-9]{1,3})%$" 看似能拦住非数字，但实际会漏掉很多边界问题：比如允许 099%（前导零）、1000%（超100）、5.5%（小数没处理）。更关键的是，pattern 只在表单提交时触发校验，且不提供实时反馈或错误提示逻辑，用户输错后点提交才弹红框，体验差。
用 JavaScript 的 test() 校验百分比字符串是否合法
真正可控的方式是手动提取值、用 JS 正则判断。核心正则应满足：0–100 范围、支持整数和一位/两位小数、禁止前导零（除单独的 0 或 0.0）、结尾必须是 %。
推荐正则：^(0|([1-9]\d{0,1}|100)(\.\d{1,2})?)%$
说明：
-
0单独匹配0% -
[1-9]\d{0,1}匹配 1–99（排除01%这类） -
100显式允许 100% -
(\.\d{1,2})?允许最多两位小数（如99.99%），不强制要求 - 整个字符串必须以
%结尾
使用示例：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
const isPercent = (str) => /^((0|([1-9]\d{0,1}|100))(\.\d{1,2})?)%$/.test(str);
isPercent("50%"); // true
isPercent("99.9%"); // true
isPercent("100.00%"); // true
isPercent("005%"); // false（前导零）
isPercent("101%"); // false
isPercent("50"); // false（缺 %）
结合 input 事件做实时校验并反馈
只校验不提示等于没做。应在用户输入时监听 input 事件，调用上面的正则，并动态设置 setCustomValidity() 和样式。
实操要点：
- 用
input.addEventListener('input', ...)，不是change（后者要失焦才触发） - 调用
input.setCustomValidity("")清空旧错误，再根据结果设新错误信息 - 别忘了加
required属性，否则空值不会被checkValidity()拦住 - CSS 中可用
:invalid伪类高亮错误状态，但注意它依赖validity.valid，而setCustomValidity会影响这个值
简短示例：
<input type="text" id="percentInput" required placeholder="如：75.5%"><script>
const inp = document.getElementById('percentInput');
inp.addEventListener('input', () => {
const v = inp.value.trim();
if (!v) return;
const valid = /^((0|([1-9]\d{0,1}|100))(\.\d{1,2})?)%$/.test(v);
inp.setCustomValidity(valid ? "" : "请输入 0–100 之间的百分比，如 50% 或 99.99%");
});
</script>
后端仍需重复校验，前端正则只是体验层
所有前端校验都可绕过。如果这个百分比要进数据库或参与计算，后端必须用对应语言的正则（如 Python 的 re.fullmatch()、Java 的 String.matches()）或数值解析逻辑再次验证。常见坑是后端只检查是否含 %，却没限制范围或小数位，导致存入 150% 或 3.1415926% 后引发后续计算异常。
真正安全的做法是：前端负责即时反馈，后端负责兜底和业务逻辑约束——两者正则表达式最好完全一致，避免前后端行为不一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
