vue element-ui el-form表单验证表单验证,数值输入验证踩坑

1、官网介绍表单验证使用https://element.faas.ele.me/#/zh-CN/component/form#biao-dan-yan-zheng

2、所遇到的问题,当字段是数字类型的时候,输入input后,验证不通过

原因是

el-input默认值的类型是字符串类型

输入即使是数字,也被el-input 自己处理成了字符换数字。

3、解决办法


         

设置

type='number'

此外,注意

v-model 需要更改为 v-model.number 否则同样验证不通过

4、当input 设置成number类型后,出在输入框末尾出现数值操作加减图标

css:

    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
    input[type="number"]{
        -moz-appearance: textfield;
    }

可以解决该问题,让显示正常

你可能感兴趣的:(vue)