vx-ui を使用してフォーム検証をカスタマイズする方法

今回は、vux-ui を使用してフォーム検証をカスタマイズする方法と、vux-ui を使用してフォーム検証をカスタマイズする際の注意事項について説明します。実際のケースを見てみましょう。

vux でフレームワーク vue を使い始めたとき、この UI ライブラリを使用するのは少し難しいことがわかりました。フォーム検証プロセス中に私が遭遇した 2 つの需要の問題とその解決方法について話しましょう。

1. x-input コンポーネントを使用すると、公式が 3 種類の is-typevalidators のみを提供していることがわかります。他のものは独自のバリデーターをカスタマイズする必要があります。認証者を書き込むには？

解決策: is-type バリデーターをカスタマイズします (テスト後に有効で通常の検証を使用できます)

<x-input type="number" v-model="code" placeholder="请输入验证码" :is-type="codeValue" />
export default {
  data() {
    return{
      code: '',
      codeValue: function(value){
        return {
          valid: value.length === 4,
          msg: "验证码有误!"
        }
      }
    }
  }
}

2. フォームのコンテンツが正しく入力された後でのみ、フォーム送信ボタンをトリガーできます (図を参照)。

解決策: x-input コンポーネントの @on-change イベントと ref 属性を使用します

<x-input type="number" v-model="code" placeholder="请输入验证码" :is-type="codeValue" ref="refcode" @on-change="keyDown" />
<x-button action-type="submit" :disabled="disabled">完成</x-button>
 export default {
    data() {
      return{
        code: '',
        disabled: true,
        codeValue: function(value){
          return {
            valid: value.length === 4,
            msg: "验证码有误!"
          }
        }
      }
    },
    methods: {
      keyDown(){
        if(this.$refs.refcode.valid == true && this.code != ''){
          this.disabled = false;
        }else{
          this.disabled = true;
        }
      }
    }
  }

この記事のケースを読んだ後は、この方法を習得したと思います。さらに興味深い情報については、次の点に注意してください。その他の関連記事は PHP 中国語 Web サイトにあります。

推奨読書:

Angularルーティングでルートガードを使用する方法

Reactがreact-routerルーティングでログイン検証制御を実装する方法

以上がvx-ui を使用してフォーム検証をカスタマイズする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。