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

Question

所以我试图制作使用输入html属性的html表单＆＃39; pattern＆＃39;但是当我通过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输入缺少\模式的反斜杠。单个<iframe sandbox="allow-scripts"></iframe> 被插值掉了，所以你需要加倍它。

Escaping in template literals

  

反斜杠用于转义模板文字内部。