使用環境
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-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) {
- // 送信処理
- }
- });
- }
- }
ElementUIのバリデーションは「async-validator」というライブラリを使用しているので、詳しくは下記をご確認くだささい。
yiminghe/async-validator