Regex in Vue attribute v-validate

Question

I would like to allow dash/hyphen in the name field

<input v-model="$parent.teacher.firstName" v-validate="'required|alpha|min:2'"
                           placeholder="Eva" class="bw" type="text" name="firstname"
                           autocomplete="teacher-firstname"/>

How can I accomplish it? I tried to add a regex like e.g. '^[a-z]+(-[a-z]+)*$' in v-validate but nothing happens

Then replace alpha with alpha_dash.

Wiktor Stribiżew
– Wiktor Stribiżew

2019-02-26 12:53:52 +00:00
Commented Feb 26, 2019 at 12:53 — Wiktor Stribiżew
– Wiktor Stribiżew, Commented Feb 26, 2019 at 12:53

James Coyle · Accepted Answer · 2019-02-26 13:08:00Z

4

You could create a custom rule

Something like this:

import { Validator } from 'vee-validate';

Validator.extend('name', {
  getMessage: field => 'The ' + field + ' value is not a valid name.',
  validate: value => value.test(/^[a-z]+(-[a-z]+)*$/)
});

answered Feb 26, 2019 at 13:08

James Coyle

10.5k2 gold badges42 silver badges49 bronze badges

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

Comments

Wiktor Stribiżew · Accepted Answer · 2019-02-26 13:07:26Z

1

You might consider changing alpha with alpha_dash.

You may set the custom regex using v-validate="{ required: true, regex: /^[a-z]+(?:-[a-z]+)*$/i, min: 2 }":

<input v-model="$parent.teacher.firstName"
  v-validate="{ required: true, regex: /^[a-z]+(?:-[a-z]+)*$/i, min: 2 }" 
  placeholder="Eva" class="bw" type="text" name="firstname" autocomplete="teacher-firstname">

See the relevant documentation.

answered Feb 26, 2019 at 13:07

Wiktor Stribiżew

631k41 gold badges502 silver badges633 bronze badges

Collectives™ on Stack Overflow

Regex in Vue attribute v-validate

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related