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

データ構造

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

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

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

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

コンポーネントの作成

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

  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>

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

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

フォーム送信時の設定

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

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

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

yiminghe/async-validator