Vue+element UIプロジェクトのel-inputは正の整数の検証しか入力できません

3671 ワード

element UIを使用するVueプロジェクトでは、検証方法が分からない学生が少なくありません.elementuiにkeyupイベントを直接書くと、エラーが発生します.これは、elementuiがエレメントの上位に自動的にdivをカプセル化することをデフォルトで設定しているため、私たちが書いたkeyupイベントは実際にdivに書かれているので、エラーが発生します.では、解決策についてお話しします.まず、最も簡単な方法でエラーを解決することができます.それはkeyupの後ろに直接追加することです.nativeで解決できる、書き方:@keyup.native ; 私たちは字面の意味からnativeを理解して、中国語は訳します:原生的で、生まれつきです;オリジナルのDOMを処理するために理解できますが、追加された識別要求は正の整数を入力できることです.次に、コードを使用して例を挙げます.
<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イベントがトリガーされ、関数を呼び出して検証されます.