vue.js element ui フォーム送信処理

バリデートが面倒ですわ。

ということで
フォーム送信時の3つの注意点

・バリデートしたい場合は、 el-form-item の prop を必ず設定
・リターンキーで送信されるのを防ぐため@submit.native.prevent="submitForm('vForm')"を設定
・フォームが複数になる場合は、以下のvFormを文字列全置換して使うsFormとかhogeFormとか。

sample.vue

<template>
    <div>

        <el-form :model="vForm" :rules="vFormRules" ref="vForm" @submit.native.prevent="submitForm('vForm')">

<!--            validate したいときは、 必ず el-form-item に prop をつけて name とする　-->
            <el-form-item label="名前" prop="name">
                <el-input v-model="vForm.name"></el-input>
            </el-form-item>

            <el-form-item label="性別" prop="sex">
                <el-radio-group v-model="vForm.sex">
                    <el-radio label="0">女性</el-radio>
                    <el-radio label="1">男性</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item>
                <div style="text-align: center;">
                    <el-button type="primary" :loading="loading" @click="submitForm('vForm')">新規会員登録</el-button>
                </div>
            </el-form-item>

        </el-form>
    </div>
</template>

sample.vue

<script>

    export default {

        data () {
            return {

                loading:false,

                vForm: {
                    name: '',
                    sex:'',
                },
                vFormRules: {
                    name: [
                        { required: true,  message: '曜日を入力してください', trigger: 'blur' }
                    ],
                    sex: [
                        { required: true,message: '時間を入力してください', trigger: 'blur' }
                    ],

                },

            };
        },


        methods: {


            //複数のフォームがあっても、送信処理はこれ一つ
            //この中で form名に合わせて処理を分けるか
            submitForm(formName) {

                //送信中はボタンを押せないように
                this.loading = true;

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

                    if(valid){

                        console.log("送信準備OK");

                        if(formName == 'vForm'){
                            console.log("vForm を送信します");
                        }

                    } else {
                        console.log("バリデートNG");
                    }

                    //ヴァリデート完了後、ボタンを押せるように
                    this.loading = false;


                });

            }

        },

    }
</script>

その他のバリデート
vFormRules

sample.vue

// trigger: 'change' でもいける
//urlが入力されているか
url: [
    { type: 'url' ,required: true, message: 'URLを入力してください', trigger: 'blur' }
],

//数値が入力されているか
price: [
    { type: 'number',required: true, min: 0, message: '0円以上で、半角数字で入力してください', trigger: 'change' }
],

//簡易チェック amazonのurlが入力されているかどうか
amazon: [
    {pattern:/www.amazon/, message: '欲しい物リストのURLを入力して下さい', trigger: 'blur' }
],

//最低10文字以上で入力してね
body: [
    { required: true, min: 9, message: '10文字以上で入力して下さい', trigger: 'change' }
],

//簡易チェック メールアドレスかどうか
email: [
    { required: true, pattern:/@/,message: 'メールアドレスを入力してください', trigger: 'change' }
],

//8文字以上で入力してね
password: [
    { required: true, min: 7, message: '8文字以上で入力して下さい', trigger: 'change' }
],