vue.js element ui validate オリジナルエラーを追加

バリデーションをかけてオリジナルのエラーを出したい場合がある。
メールアドレス重複チェックなど。
その際の方法。

```

<style>

    /* add_error が true の場合、 is_error クラスをつける。そして、その中の input に スタイルを指定*/
    .is_error input {
        border-color: #f56c6c !important;
    }

</style>
<template>


    <div>
        <h2>新規会員登録</h2>

        <el-form :model="add_form" :rules="rules" ref="add_form">

            <el-form-item label="名前" prop="name">
                <el-input v-model="add_form.name"></el-input>
            </el-form-item>

            <el-form-item label="メールアドレス" prop="email">
                /* add_error が true の場合、 is_error クラスをつける。そして、その中の input に スタイルを指定*/

                <el-input v-model="add_form.email" v-bind:class="{is_error: add_error}"></el-input>
                <el-alert  v-if="add_error" title="すでに登録されているメールアドレスです" type="error" :closable="false"></el-alert>
            </el-form-item>

            <el-form-item label="パスワード" prop="password">
                <el-input v-model="add_form.password"></el-input>
            </el-form-item>


            <el-form-item>



                <el-button type="primary" @click="submitForm('add_form')">新規会員登録</el-button>
                <!--<el-button @click="resetForm('add_form')">Reset</el-button>-->

            </el-form-item>
        </el-form>

    </div>


</template>

<script>
    export default {
        data() {
            return {

            //
                add_form: {
                    name:'',
                    email: 'info@xxx.jp',
                    password: 'xxxx'
                },
                add_error:false,
                rules: {
                    name: [
                        { required: true, message: '名前を入力してください', trigger: 'change' }
                    ],
                   email: [
                        { required: true, message: 'メールアドレスを入力してください', trigger: 'change' }
                   ],
                   password: [
                        { required: true, min: 3, message: '4文字以上でパスワードを入力してください', trigger: 'change' }
                   ],
                }
            };
        },

        created() {

        },
        methods: {
            //
            submitForm(formName) {

                this.$refs[formName].validate((valid) => {


                    if (valid) {

                        let dataform = new FormData();
                        dataform.append('name', this.add_form.name);
                        dataform.append('email', this.add_form.email);
                        dataform.append('password', this.add_form.password);

                        this.$parent.loading = true;

                        axios.post('/user/add/', dataform).then(e => {


                            this.add_error = false;

                            this.$message({
                                message: '新規会員登録しました',
                                type: 'success'
                            });

                            let tmp = JSON.stringify(e.data.res);//jsonにして保存
                            localStorage.setItem('user',tmp);

                            this.$parent.user = e.data.res;


                            console.log("成功ログイン");
                            this.$parent.loggedIn = true;

                            this.$router.push('/mypage');


                        }).catch((error) => {


                            this.$message({
                                message: 'ログインできません',
                                type: 'error'
                            });
                            // this.$refs[formName].resetFields();

                            //エラーを true に。 エラーが true ということは vue.js を通り抜けた。
                            //ということはメール重複エラーしかありえないので。
                            this.add_error = true;

                            console.log("ログイン失敗");

                        });


                        this.$parent.loading = false;


                    } else {

                        console.log('送信エラー!!');
                        return false;
                    }


                });
            },
            // resetForm(formName) {
            //     this.$refs[formName].resetFields();
            // }
        }
    }
</script>

```