elementui 中input 设置为数字必填项
时间: 2023-09-27 14:08:18 浏览: 100
详解element-ui设置下拉选择切换必填和非必填
您可以通过设置 input 组件的 type 属性为 number,然后在表单验证时判断输入值是否为空或NaN 来实现数字必填项。同时,还可以使用 elementui 提供的表单验证规则来简化开发。例如:
```html
<template>
<el-form ref="form" :model="form" :rules="rules">
<el-form-item label="数字必填项">
<el-input v-model.number="form.number" placeholder="请输入数字"></el-input>
</el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
number: null
},
rules: {
number: [
{ required: true, message: '请输入数字', trigger: 'blur' },
{ type: 'number', message: '请输入有效的数字', trigger: 'blur' }
]
}
}
},
methods: {
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
// 表单验证通过,提交数据
console.log(this.form.number)
} else {
// 表单验证失败
console.log('验证失败')
}
})
}
}
}
</script>
```
这样,在用户输入数字时,如果为空或不是数字,表单验证就会提示错误信息,从而实现数字必填项的逻辑。
阅读全文