1、官网介绍表单验证使用https://element.faas.ele.me/#/zh-CN/component/form#biao-dan-yan-zheng
2、所遇到的问题,当字段是数字类型的时候,输入input后,验证不通过
原因是
el-input默认值的类型是字符串类型
输入即使是数字,也被el-input 自己处理成了字符换数字。
3、解决办法
<el-form-item class="base_block" label="渠道号" prop="channelId" label-width="40%">
<el-input type='number' class="el_input_box" v-model.number="channel.baseConfDetail.channelId" :disabled="!isEdit"/>
</el-form-item>
设置
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;
}
可以解决该问题,让显示正常