美文网首页
el-input使用oninput做正则校验之后,v-model

el-input使用oninput做正则校验之后,v-model

作者: 85d8c4f3886f | 来源:发表于2022-05-15 11:41 被阅读0次

    需求

    一个输入框,只能输入数字,必填项(输入除数字之外的任何东西,都不会出现在输入框里)

    操作步骤:

    1.英文输入法按出字母,无法出现在输入框内,此步骤正常
    2.失去焦点后,提示此项为必填,此步骤正常
    3.输入数字之后提示消失,此步骤正常
    4.中文输入法按出词语,无法出现在输入框内,此步骤正常
    5.失去焦点后,提示此项为必填,此步骤正常
    6.输入数字之后提示不消失,v-model显示为空字符串

    原因

    在输入中文输入法触发了oninput之后,v-model绑定的值会被赋值为空字符串,这时候再输入数字,依然会被赋值为空字符串

    解决办法:

    在blur事件中手动赋值

     <el-form-item label="失败重试次数:" prop="executorFailRetryCount">
          <el-input v-model="form.executorFailRetryCount"   oninput="value = value.replace(/\D/g, '')" 
           @blur="form.executorFailRetryCount=$event.target.value"/>
    </el-form-item>
    

    相关文章

      网友评论

          本文标题:el-input使用oninput做正则校验之后,v-model

          本文链接:https://www.haomeiwen.com/subject/acaiurtx.html