WEBOPIXEL

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

Posted: 2018.11.28 / Category: javascript / Tag: 

Vue.jsでフォームバリデーションをしたい場合、多くのライブラリがあったりするので何がいいかなと悩んだりしますが、Element UI を導入している状態ならバリデーション機能が組み込まれているということなのでした。

Sponsored Link

使用環境
vue: ^2.5.7
element-ui: ^2.4.8

データ構造

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

<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>
loginForm formのmodelに設定するオブジェクトです。この中にinputのv-model入る値を入れます。
rules ここにフォームバリデーションのルールを設定します。
emailは「必須」「30文字以内」「メール形式」という3つのルールを設定してます。

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

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

コンポーネントの作成

データの値をmodelに設定し、el-form-itempropにも設定します。
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) {
				// 送信処理
			}
		});
	}
}

ElementUIのバリデーションは「async-validator」というライブラリを使用しているので、詳しくは下記をご確認くだささい。

yiminghe/async-validator