Posted: 2018.11.28 / Category: javascript / Tag: Vue

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) {
				// 送信処理
			}
		});
	}
}