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

1
<script>
2
export default {
3
  data () {
4
    return {
5
      loginForm: {
6
        email: '',
7
        password: '',
8
      },
9
      rules: {
10
                email: [
11
                    { required: true, message: 'タイトルは必ず入力してください。' },
12
                    { max: 30, message: '30文字以内で入力してください。' },
13
                    { type: 'email', message: 'メール形式で入力してください。' }
14
                ],
15
                password: [
16
                    { required: true, message: 'パスワードは必ず入力してください。' },
17
                    { max: 30, message: '30文字以内で入力してください。' }
18
                ],
19
            },
20
    }
21
  },
22
}
23
</script>

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

1
<template>
2
    <div class="login-panel">
3
        <el-form :model="loginForm" ref="loginForm" :rules="rules">
4
            <el-form-item label="メールアドレス" prop="email">
5
                <el-input type="text" v-model="loginForm.email" autocomplete="off"></el-input>
6
            </el-form-item>
7
            <el-form-item label="パスワード" prop="password">
8
                <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
9
            </el-form-item>
10
            <el-button type="primary" @click="handleLogin">ログイン</el-button>
11
        </el-form>
12
    </div>
13
</template>

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

1
methods: {
2
  handleLogin() {
3
    this.$refs['loginForm'].validate((valid) => {
4
      if (valid) {
5
        // 送信処理
6
      }
7
    });
8
  }
9
}