Vue.js組件HTML輸入模式驗證不起作用

Question

因此，我試圖制作使用輸入html屬性'pattern'的html表單，但是當我通過Vue.js組件使用html表單時，它會產生非常奇怪的行為。 這是一個小提琴來演示。

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演示

這里的regex模式分解（regex101示例） 。

現在，對於我來說，我無法弄清楚為什么正常版本可以正確驗證，而Vue版本卻不能。

Answer 1

您的Vue輸入缺少\\d模式上的反斜杠。 單個\\被內插掉，因此您需要將其加倍。

轉義模板文字

反斜杠用於轉義模板文字內部。