So I'm attempting to make html forms that use the input html attribute 'pattern' however when I do so through Vue.js ponents, its creating very strange behavior. Here is a fiddle to demonstrate.

Vueponent('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

Breakdown of the patterns regex here (regex101 example).

Now for the life of me, I cannot figure out why the normal version validates properly, but the Vue version does not.

So I'm attempting to make html forms that use the input html attribute 'pattern' however when I do so through Vue.js ponents, its creating very strange behavior. Here is a fiddle to demonstrate.

Vue.ponent('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

Breakdown of the patterns regex here (regex101 example).

Now for the life of me, I cannot figure out why the normal version validates properly, but the Vue version does not.

• javascript
• html
• vue.js
• vuejs2
• vue-ponent

1 Answer 1

Your Vue input is missing a backslash on the \d pattern. The single \ gets interpolated away, so you need to double it.

Escaping in template literals

The backslash is used for escaping inside template literals.