ホームページ > 記事 > ウェブフロントエンド > Vue で vx-ui カスタム フォーム検証を使用する場合の注意点は何ですか?
今回は vux-ui を使用した Vue のカスタマイズについてお届けしますフォームの検証注意事項以下の実際のケースを見てみましょう。
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 サイトにあります。 推奨読書:
Reactルーティング管理React Routerを使用する手順の詳細な説明
以上がVue で vx-ui カスタム フォーム検証を使用する場合の注意点は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。