Vue.js组件html输入模式验证不起作用

Question

所以我试图制作使用输入 html 属性“模式”的 html 表单，但是当我通过 Vue.js 组件这样做时，它会产生非常奇怪的行为。这是一个要演示的小提琴。

Vue.component('test', {
template:`<input type="text" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,16}"
title="Must contain at least one number and one uppercase and lowercase letter, and be between 8 and 16 characters."/>`
})

jsfiddle Demo

模式正则表达式here (regex101 example)的分解。

现在对于我的生活，我无法弄清楚为什么普通版本可以正确验证，但 Vue 版本却没有。

Answer 1

您的 Vue 输入在 \d 模式上缺少反斜杠。单个 \ 被插值掉了，所以你需要加倍它。

Escaping in template literals

反斜杠用于在模板文字中转义。