HTML表单pattern属性不支持单独校验字符串结尾，需利用其隐式全匹配（^...$）特性，用[^\s]*\.pdf等结构确保整体符合“以某字符串结尾”；JavaScript推荐endsWith()或带$锚点的正则test()；后端必须独立校验且与前端规则严格一致。
HTML 中根本没有正则表达式校验字符串结尾的功能
HTML 表单的 pattern 属性确实支持正则，但它运行在浏览器表单验证层，不是“HTML 自带正则引擎”，而且它只对整个输入值做匹配（即隐式锚定：等价于 ^...$），不支持单独校验“结尾”。想用 pattern=".*.jpg" 检查是否以 .jpg 结尾？会失败——因为 .*.jpg 能匹配 a.jpg.bak，它没强制“结尾”。
pattern 里怎么正确写“必须以某字符串结尾”
关键点：利用 pattern 的隐式全匹配特性，把“结尾”逻辑转成“整个字符串符合某结构”。要确保结尾，就得让正则从头到尾描述清楚——包括开头允许什么、中间可选什么、结尾必须是什么。
- ✅ 正确写法（校验以
.pdf结尾）：pattern="[^\s]+\.pdf$"—— 注意$在这里其实冗余（pattern自动全匹配），但保留更直观；更稳妥写法是pattern="[^\s]*\.pdf"，表示“零个或多个非空白字符 + .pdf” - ⚠️ 常见错误：
pattern="\.pdf"—— 这只会匹配字符串中任意位置的.pdf，比如report.pdf.txt也能过 - ⚠️ 容易忽略转义：
.在正则里是元字符，必须写成\.pdf，否则.pdf会匹配xpdf、1pdf等 - ? 实际建议：用
[^\s]*替代.*，避免空格导致验证通过但后端拒绝
JavaScript 中用 test() 或 endsWith() 更可靠
如果需要动态判断、或脱离表单验证场景，别硬套 pattern。浏览器原生方法更直接：
- ✅ 推荐用
str.endsWith(".png")—— 语义清晰、无正则陷阱、性能好、IE11+ 支持 - ✅ 需要正则灵活性（如忽略大小写）：
/.jpe?g$/i.test(str)—— 注意显式加$锚定结尾，i标志处理大小写 - ❌ 不要用
str.match(/.txt$/)判断，它返回数组或 null，需额外判空；test()才是布尔意图 - ⚠️ 注意
endsWith("")返回true，空字符串是所有字符串的结尾——业务上通常要先str.length > 0
后端校验不能依赖前端 pattern
用户可以禁用 JS、绕过表单、直接发请求。pattern 只是体验优化，不是安全边界。
- PHP 示例：
if (!preg_match('/.csv$/i', $_POST['file_name'])) { /* 拒绝 */ } - Python 示例：
if not filename.lower().endswith('.log'): - Node.js 示例：
if (!/.(env|config)$/i.test(filename)) - ⚠️ 后端注意路径遍历风险：仅校验结尾不够，还要检查完整路径是否在允许目录内，比如
../../etc/passwd也以.passwd结尾
真正容易被忽略的是：前端 pattern 和后端校验规则必须严格一致，否则会出现“前端能提交、后端报错”的割裂体验。尤其是大小写、空格、编码（如 URL 编码后的 %2Ejpg）这些细节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
