Question

我正在尝试使用计划在当前正在使用的项目中使用的 vue 构建自己的简单表单验证（在 laravel 表单验证之后建模）。< / p>

我的问题很奇怪，当我单击“提交”按钮时，不会出现表单验证错误，但是当我右键单击任何输入元素并选择“检查”元素时，如下所示，然后出现错误。

之前

之后

我已经使用chrome和firefox对此进行了测试，它们都显示相同的问题，并且在任何浏览器控制台中都没有代码错误。

当前正在使用的代码文件

Demo.vue

<template>
    <!-- prettier-ignore -->
    <form @submit.prevent="submit" autocomplete="off" novalidate>
        <div
            class="form-group has-feedback"
            :class="{
                'has-error': errors.has('username') || errors.has('message')
            }"
        >
            <input
                type="text"
                v-model.trim="form.username"
                class="form-control"
                placeholder="Username"
                required
            />
            <span
                class="help-block"
                v-if="errors.has('username') || errors.has('message')"
            >{{ errors.get('username') || errors.get('message') }}</span>
        </div>
        <div
            class="form-group has-feedback"
            :class="{ 'has-error': errors.has('password') }"
        >
            <input
                type="password"
                v-model.trim="form.password"
                class="form-control"
                placeholder="Password"
                autocomplete="off"
                required
            />
            <span
                class="help-block"
                v-if="errors.has('password')"
            >{{ errors.get('password') }}</span>
        </div>
        <button
            type="submit"
            class="btn btn-primary btn-block btn-flat"
        >Login</button>
    </form>
</template>

<script>
import formMixin from '@/mixins/form';

export default {
    name: 'demo',
    mixins: [formMixin],
    data() {
        return {
            form: {
                username: '',
                password: '',
            },
            rules: {
                username: 'required',
                password: 'required',
            },
        };
    },
    methods: {
        submit() {
            this.validate();

            if (this.errors.any()) {
                return;
            }
        },
    },
};
</script>

mixins / form.js

import _ from 'lodash';
import Errors from '@/utils/Errors';

export default {
    data() {
        return {
            errors: new Errors(),
        };
    },
    methods: {
        getLabel(field) {
            let fieldLabel = null;

            if (this.labels && this.labels[field]) {
                fieldLabel = this.labels[field];
            }

            return fieldLabel;
        },

        handleRequired(field, value) {
            let label = this.getLabel(field);
            const message = `${label ? label : 'Field'} is required`;

            if (!value) {
                this.errors.set(field, message);
            }
        },

        process() {
            Object.keys(this.rules).forEach((key) => {
                this.rules[key].split('|').forEach((rule) => {
                    this[`handle${_.startCase(rule)}`](key, this.form[key]);
                });
            });
        },

        validate() {
            this.process();
        },
    },
};

utils / Errors.js

export default class Errors {
    constructor() {
        this.errors = {};
    }

    any() {
        return Object.keys(this.errors).length > 0;
    }

    has(field) {
        return Object.prototype.hasOwnProperty.call(this.errors, field);
    }

    set(field, error) {
        this.errors[field] = error;
    }


    get(field) {
        if (this.errors[field]) {
            return typeof this.errors[field] === 'string'
                ? this.errors[field]
                : this.errors[field][0];
        }

        return '';
    }

    record(errors) {
        this.errors = errors;
    }

    clear(field) {
        if (field) {
            delete this.errors[field];
            return;
        }

        this.errors = {};
    }
}

什么可能导致这种情况发生？

谢谢。

Vue表单验证问题

0 个答案: