フィールド単位の検証設定

フォーム項目に対して個別に検証条件を適用するには、el-formに:rules属性をバインドし、対応するel-form-itemへpropを指定します。検証ロジックはデータオブジェクト内でルール配列として定義します。

<el-form :model="formData" :rules="constraints" ref="accountForm">
  <el-form-item label="ログインID" prop="loginId">
    <el-input v-model="formData.loginId" placeholder="アカウントを入力" />
  </el-form-item>
</el-form>

export default {
  data() {
    return {
      formData: { loginId: '' },
      constraints: {
        loginId: [
          { required: true, message: 'アカウントの入力は必須です', trigger: 'blur' },
          { min: 4, max: 16, message: '4文字以上16文字以内で設定してください', trigger: 'change' }
        ]
      }
    }
  }
}

フォーム全体の検証と送信制御

複数の項目を一度に検証し、送信処理を制御する場合はel-formにrefを設定し、インスタンスメソッドを呼び出します。検証結果はコールバックまたはPromiseで取得可能です。

methods: {
  executeSubmit() {
    this.$refs.accountForm.validate((isValid) => {
      if (isValid) {
        // 全項目の検証に成功
        this.sendApiRequest()
      } else {
        // 検証失敗
        console.warn('入力内容を確認してください')
        return false
      }
    })
  }
}

独自バリデーション関数の実装

標準の検証条件では対応できない複合的なチェックが必要な場合、カスタムバリデーターを作成します。検証関数はrule、value、callbackの3引数を受け取り、エラー時にはcallback(new Error('...'))を、成功時にはcallback()を実行します。

export default {
  data() {
    // data関数内、returnの外で検証ロジックを定義
    const checkPasswordMatch = (rule, value, callback) => {
      if (!value) {
        callback(new Error('確認用パスワードは必須です'))
      } else if (value !== this.formData.originalPassword) {
        callback(new Error('入力されたパスワードが一致しません'))
      } else {
        callback()
      }
    }

    return {
      formData: { originalPassword: '', confirmPassword: '' },
      rules: {
        confirmPassword: [
          { validator: checkPasswordMatch, trigger: 'blur' }
        ]
      }
    }
  }
}

テンプレート側では対象項目にprop="confirmPassword"を設定し、上記のルールを:rulesへバインドすることで動作します。カスタム検証関数内でのthis参照は、Vueコンポーネントのスコープ内で適切にバインドされるよう実装してください。