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

Question

所以我试图制作使用输入html属性'pattern'的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演示

这里的模式正则表达式的细分(regex101示例).

现在,对于我的生活,我无法弄清楚为什么正常版本正确验证,但Vue版本没有.

Answer 1

您的Vue输入缺少\d模式上的反斜杠.单个\被插入,所以你需要加倍.

逃避模板文字

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