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

Share Follow asked Sep 27, 2017 at 14:02 Hex CrownHex Crown 76311 gold badge1010 silver badges2424 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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.