Vee-validate: как добавить несколько правил проверки после создания объекта - PullRequest
Новая
       17

Vee-validate: как добавить несколько правил проверки после создания объекта

0 голосов
/ 26 апреля 2018

Я новичок в разработке Vue.js.

Используя Vee-validate, я хочу поставить правила проверки «required» и «regex» (например, telphone num должен быть обязательным && \ d {11}).

Я внимательно прочитал официальную документацию .

Тем не менее, я не могу понять, как поместить два условия, включая выражение регулярного выражения, в "create ()" экземпляра Vue.

Работы ниже: 

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

но это не работает: 

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

Как включить более одного условия?

1 Ответ

0 голосов
/ 27 апреля 2018

Я предпочитаю использовать директивную версию самостоятельно. После того, как вы импортируете VeeValidate в свой компонент, вы получаете доступ ко всем встроенным проверкам через v-validate и можете связать их вместе, используя оператор конвейера |: 

<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>

Если вы хотите выполнить это без использования директив, должно работать следующее: 

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...
...