el-input-number校验
时间: 2023-11-08 16:05:52 浏览: 175
element el-input directive数字进行控制
el-input-number组件可以通过设置min、max、step等属性来限制输入的范围和步长,但如果需要更复杂的校验,可以使用自定义校验函数。具体实现方法如下:
1. 在el-input-number组件上添加ref属性,例如:ref="inputNumber"
2. 在校验函数中获取该组件实例:this.$refs.inputNumber
3. 调用实例的validate()方法进行校验,例如:this.$refs.inputNumber.validate()
校验函数示例:
```
<template>
<el-input-number v-model="value" ref="inputNumber"></el-input-number>
</template>
<script>
export default {
data() {
return {
value: ''
}
},
methods: {
validateInputNumber() {
const inputNumber = this.$refs.inputNumber
if (inputNumber.value < 0 || inputNumber.value > 100) {
inputNumber.$refs.input.classList.add('is-error')
inputNumber.$emit('input', '')
inputNumber.$emit('change', '')
return false
} else {
inputNumber.$refs.input.classList.remove('is-error')
return true
}
}
}
}
</script>
```
阅读全文