Vue.js + Element UI でフォームバリデーション

データ構造

ここではメールアドレスとパスワードを入力するログインフォームを想定してバリデーションを設定してみます。
まずはデータ構造から。

<script>
export default {
	data () {
		return {
			loginForm: {
				email: '',
				password: '',
			},
			rules: {
                email: [
                    { required: true, message: 'タイトルは必ず入力してください。' },
                    { max: 30, message: '30文字以内で入力してください。' },
                    { type: 'email', message: 'メール形式で入力してください。' }
                ],
                password: [
                    { required: true, message: 'パスワードは必ず入力してください。' },
                    { max: 30, message: '30文字以内で入力してください。' }
                ],
            },
		}
	},
}
</script>

他にもtriggerを指定することでバリデーションのタイミングを変更することができます。
例えば下記のようにblurを指定すると、フォーカスアウト時に実行されます。

{ type: 'email', message: 'メール形式で入力してください。', trigger: 'blur' }

コンポーネントの作成

データの値をmodelに設定し、el-form-itemのpropにも設定します。
el-formに:rulesを指定することでルールが適用されます。

<template>
    <div class="login-panel">
        <el-form :model="loginForm" ref="loginForm" :rules="rules">
            <el-form-item label="メールアドレス" prop="email">
                <el-input type="text" v-model="loginForm.email" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="パスワード" prop="password">
                <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-button type="primary" @click="handleLogin">ログイン</el-button>
        </el-form>
    </div>
</template>

バリデーションルールは下記のようにel-form-itemのコンポーネントタグに設定することもできます。

<el-form-item
	label="メールアドレス" prop="email"
	:rules="[
		{ required: true, message: 'タイトルは必ず入力してください。' },
		{ max: 30, message: '30文字以内で入力してください。' },
		{ type: 'email', message: 'メール形式で入力してください。' }
	]">

フォーム送信時の設定

これだけでもバリデーションは動作しますが、エラー時はフォーム送信できないようにしてみましょう。
フォームボタンのクリックイベントにhandleLoginを指定したので、handleLoginメソッドを下記のようにします。

methods: {
	handleLogin() {
		this.$refs['loginForm'].validate((valid) => {
			if (valid) {
				// 送信処理
			}
		});
	}
}