Vee-validate : how to attach several validation rules after object constructed

Question

I'm a newbie in Vue.js development.

Using Vee-validate, I want to put validation rules "required" and "regex" (for example, telphone num should be required && \d{11}).

I read the official documentation carefully.

However, I can't figure out how to put two conditions including regex expression inside " created() " of Vue instance.

The below works:

this.$validator.attach({ name: "tel", rules: "required" });

but this does not work:

this.$validator.attach({ 
  name: "tel", 
  rules: "{ 
    required: true , regex: /\d{11}/ 
  }'" 
});

How can I enable more than one condition?

Does it print some error message or something? Did you try mounted hook instead? — Maksim Nesterenko
Remove the double quotes around the rules object. Should be: validator.attach({ name: "tel", rules: { required: true, regex: /\d{11}/ }}); — Daniel Bushman

Derek Fulginiti Derek Fulginiti · Accepted Answer · 2018-04-26T21:48:49

I prefer using the directive version myself. Once you import VeeValidate into your component, you have access to all of the built-in validation via v-validate and can chain them together using the pipe | operator:

<template>
    <input name="email" type="text" v-model="emailData" v-validate="'required|email'">
    <button @click="submit()"></button>
</template>

<script>
    import VeeValidate from 'vee-validate'; //wherever your plugin is stored
    data() {
        return {
            emailData: null,
        },
    },
    methods: {
        // call this method upon form submission, this will validate all fields using the specified validation
        submit() {
            this.$validator.validateAll().then((result) => {
                if (result) {
                    // form/input(s) passed validation. Do something
                }
            });
    }
</script>

If you'd like to accomplish this without using directives, the following should work:

import { Validator } from 'vee-validate';
const validator = new Validator();
const expressions = {
    required: true,
    regex:    /\d{11}/
};
validator.attach({ name: 'tel', rules: expression });
// continue with validator.validate() etc...

Vee-validate : how to attach several validation rules after object constructed

1 Answers