Vue.js component html input pattern validation not working

Question

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

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

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.

Roy J · Accepted Answer · 2017-09-27 14:10:13Z

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.

answered Sep 27, 2017 at 14:10

Roy J

44k10 gold badges84 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue.js component html input pattern validation not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related