vantフォーム検証実装

vantのinput入力コンポーネントはFieldで、このコンポーネントはカスタムチェック機能を提供せず、emailなど特定のいくつかの値のチェックのみを提供しています.vant自体にform関連コンポーネントはありません.
私たちが開発するとき、ユーザーがフォームに記入し、入力操作を行うことは避けられません.これにより、フォームに入力された値を検証することは避けられません.
私の前のブログではvant+VeeValidがformフォームの検証を行う方法を紹介しました.
今日私が開発したとき、フォーム検証の効果を実現するためにもっと簡単な方法があることに気づきました.Fieldコンポーネントのerror-message属性値が空でない場合、赤いプロンプトが表示されます.この原理により,Fieldコンポーネントにblurイベントを加え,blurイベントでデータを検証し,検証結果に基づいてerror-messageを付与することができる.
簡単なサンプルコード:

import { checkPhone } from '../util/validate'

export default {
  name: 'Demo',
  components: {},
  mixins: [],
  props: {},

  data() {
    return {
      form: {
        mobilePhone: ''
      },
      errMsg: {
        mobilePhone: ''
      }
    }
  },



  methods: {
    checkPhone() {
      if (!this.form.mobilePhone) {
        this.errMsg.mobilePhone = '       ！'
        return false
      } else if (!checkPhone(this.form.mobilePhone)) {
        this.errMsg.mobilePhone = '        ！'
        return false
      } else {
        this.errMsg.mobilePhone = ''
        return true
      }
    }
  }
}