ElementUI输入框做手机号校验,填写正确表单项的校验结果却没有移除

今天测试发现手机号可以随便输入文字，让改成只能输入手机号.我改完这个bug发现输入文字确认以后离开输入框，再输入正确的手机号，Element的表单校验却一直是校验不通过

1.校验规则

校验规则

• 手机号校验只能输入数字,并且只能输入 11 位

<el-col :span="12">
  <el-form-item label="手机号码" prop="phoneNumber">
    <el-input
      v-model="form.phoneNumber"
      placeholder="请输入手机号码"
      maxlength="11"
      oninput="value=value.replace(/[^\d]/g,'')"
      @input="onPasswordInput"
    />
  </el-form-item>
</el-col>

2.解决问题

只要在el-input组件中加入@blur就解决了。

技术点: @blur(失焦)是输入框在输入完成、失去焦点，移到其他地方触发。一般用于进行验证时，需要用到该事件。

3.代码块

<el-col :span="12">
  <el-form-item label="手机号码" prop="phoneNumber">
    <el-input
      v-model="form.phoneNumber"
      placeholder="请输入手机号码"
      maxlength="11"
      oninput="value=value.replace(/[^\d]/g,'')"
      @blur="$event => {form.phoneNumber = Number($event.target.value) || '';}"
      @input="onPasswordInput"
    />
  </el-form-item>
</el-col>

4.手机号校验效果

5.金额校验

贴个类似的金额校验

• 只允许两位小数

<el-form-item label="本期应收" prop="fee">
  <el-input
    v-model="form.fee"
    oninput="value=((value.replace(/[^0-9.]/g,'').replace(/^./g,'').replace('.','$#$').replace(/./g,'').replace('$#$','.').replace(/^(-)*(\d+).(\d\d).*$/,'$1$2.$3')))"
    @blur="
      $event => {
        this.form.fee = Number($event.target.value) || '';
      }
    "
    placeholder="请输入本期应收"
    size="small"
    :disabled="isOnlyShow"
  >
    <template slot="append">元</template>
  </el-input>
</el-form-item>