Vue+element UIプロジェクトのel-inputは正の整数の検証しか入力できません
3671 ワード
element UIを使用するVueプロジェクトでは、検証方法が分からない学生が少なくありません.elementuiにkeyupイベントを直接書くと、エラーが発生します.これは、elementuiがエレメントの上位に自動的にdivをカプセル化することをデフォルトで設定しているため、私たちが書いたkeyupイベントは実際にdivに書かれているので、エラーが発生します.では、解決策についてお話しします.まず、最も簡単な方法でエラーを解決することができます.それはkeyupの後ろに直接追加することです.nativeで解決できる、書き方:@keyup.native ; 私たちは字面の意味からnativeを理解して、中国語は訳します:原生的で、生まれつきです;オリジナルのDOMを処理するために理解できますが、追加された識別要求は正の整数を入力できることです.次に、コードを使用して例を挙げます.
コードから分かるように、入力するたびにkeyupイベントがトリガーされ、関数を呼び出して検証されます.
<div>
<el-form-item label=" :" prop="bankName" >
<el-input v-model="formData.bankName" maxlength="100" @keyup.native="proving"/>
</el-form-item>
</div>
proving() {
this.formData.bankName = this.formData.bankName.replace(/[^\.\d]/g,'');
this.formData.bankName = this.formData.bankName.replace('.','');
},
コードから分かるように、入力するたびにkeyupイベントがトリガーされ、関数を呼び出して検証されます.