el-input-number表单校验
时间: 2023-08-30 11:11:20 浏览: 305
对于 el-input-number 组件的表单校验,你可以使用 Element UI 提供的表单验证规则(rules)来实现。下面是一个简单的示例:
首先,你需要在 data 中定义一个表单校验规则:
```javascript
data() {
return {
rules: {
// 输入不能为空
required: [
{ required: true, message: '该字段不能为空', trigger: 'blur' }
],
// 输入必须是数字
number: [
{ type: 'number', message: '请输入数字', trigger: 'blur' }
],
// 输入必须在一定范围内
range: [
{ type: 'number', min: 1, max: 100, message: '请输入1到100之间的数字', trigger: 'blur' }
]
}
}
}
```
然后,在 el-input-number 组件上使用这些规则:
```html
<el-form :model="form" ref="form" :rules="rules">
<el-form-item label="数字" prop="number">
<el-input-number v-model="form.number" :min="1" :max="100"></el-input-number>
</el-form-item>
</el-form>
```
最后,在提交表单时进行校验:
```javascript
methods: {
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
// 表单校验通过,进行提交操作
} else {
// 表单校验不通过
}
});
}
}
```
这样,当用户在 el-input-number 输入框中输入内容时,会根据定义的规则进行校验,并在校验不通过时显示相应的提示信息。
希望能对你有所帮助!如果还有其他问题,请随时提问。