@WebDiamis

Как на vue js реализовать валидацию используя element-ui?

Добрый день столкнулся с такой задачкой:
При клике на кнопку срабатывает метод submitForm в файл from.vue, но валидацию не проходит.

Подскажите пожалуйста как реализовать данную задачу?

Пример данных валидации хоронящиеся в переменной rules:
rules: {
title: [{min: 3, max: 5, message: "Length should be 3 to 5"}]
}

Использую библиотеку element.eleme.io/#/en-US/component/form

index.html
...
<vue-form>
    <vue-form-input></vue-form-input>
    <vue-form-button></vue-form-button>
</vue-form>
...


app.js
import Vue       from 'vue'
import ElementUI from 'element-ui';
import locale    from 'element-ui/lib/locale/lang/en';
import Form  from './components/formfields';

Vue.use(ElementUI, { locale });
Vue.use(Form);

const app = new Vue({
    el: '#app'
})


файл /components/formfields/form.vue
<template>
    <el-form label-width="120px"
        :model="ruleForm" 
        :rules="rules"
        ref="ruleForm"
    >
        <slot></slot>
    </el-form>
</template>


<script>
export default {
    name: 'VueForm',
    props: [
        'formMethod',
        'formAction',
    ],
    data() {
        return {
            ruleForm: {},
            rules: {}
        }
    },
    provide(){
        return {
            fieldsForm: this.ruleForm,
            addFormRules: this.addFormRules,
            submitForm: this.submitForm,
            resetFrom: this.resetFrom,
        }
    },
    methods: {
      
        submitForm(formName) {
            console.log('ruleForm', this.ruleForm);
            console.log('rules', this.rules);

            console.log(this.$refs[formName]);
            this.$refs[formName].validate((valid) => {
            if (valid) {
                alert('submit!');
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
        
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },

        addFormRules (ruleForm, rules) {
            this.ruleForm[ruleForm.key] = ruleForm.value;
            this.rules[ruleForm.key] = rules;
        }
    }
}
</script>


файл /components/formfields/form-text.vue
<template>
    <el-form-item :label="dataLabel" :prop="dataRow.field">
        <el-input v-model="fieldsForm[dataRow.field]"></el-input>
    </el-form-item>
</template>


<script>
export default {
    name: 'VueFormText',
    data () {
        return {
            input: ''
        }
    },
    inject: [ 'fieldsForm', 'addFormRules' ],
    props: [
        'dataRow',
        'dataLabel',
        'dataValue'
    ],
    created () { 
        let rules = [];
        if(this.dataRow.details && this.dataRow.details.validation) {
            rules = this.dataRow.details.validation
        }
        
        this.addFormRules(
            { 'key': this.dataRow.field, 'value': this.dataValue },
            rules
        );
    },
}
</script>
  • Вопрос задан
  • 100 просмотров
Пригласить эксперта
Ответы на вопрос 1
@WebDiamis Автор вопроса
Используя метод научного тыка, обнаружил ошибку в файл /components/formfields/form.vue
Текущий метод
addFormRules (ruleForm, rules) {
        this.ruleForm[ruleForm.key] = ruleForm.value;
        this.rules[ruleForm.key] = rules;
}

addFormRules (ruleForm, rules) {
        // this.ruleForm[ruleForm.key] = ruleForm.value; УДАЛИЛ эту сточку и все заработало
        this.rules[ruleForm.key] = rules;
}


Не понял с чем это связано, может быть кто то сможет подсказать?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
Lensoft.pro Санкт-Петербург
от 100 000 до 140 000 руб.
Cindx Москва
от 130 000 до 180 000 руб.
Ingram Micro Cloud Москва
от 170 000 руб.
18 янв. 2019, в 14:12
70000 руб./в месяц
18 янв. 2019, в 13:24
500 руб./за проект
18 янв. 2019, в 13:04
12000 руб./в месяц