iview表单验证输入框只能输入大于0的数字
时间: 2023-07-25 20:06:53 浏览: 126
你可以使用 `rules` 属性来实现这个需求。具体实现方式如下:
```html
<template>
<Row>
<i-col span="8">
<Form :model="form">
<FormItem label="数字">
<Input v-model="form.number" />
</FormItem>
<FormItem>
<Button type="primary" @click="submitForm">提交</Button>
</FormItem>
</Form>
</i-col>
</Row>
</template>
<script>
export default {
data() {
return {
form: {
number: ''
}
}
},
methods: {
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
console.log('验证通过')
} else {
console.log('验证失败')
}
})
}
},
mounted() {
// 自定义验证规则
this.$refs.form.addRule('number', v => Number(v) > 0 || '请输入大于0的数字')
}
}
</script>
```
在该示例中,我们首先定义了一个表单,其中包含一个数字输入框和一个提交按钮。然后,我们在 `mounted` 钩子函数中定义了一个自定义验证规则,该规则要求输入的值必须是大于 0 的数字。最后,我们在 `submitForm` 方法中调用了表单的 `validate` 方法,以验证输入的值是否符合规则。
注意:在自定义验证规则时,我们需要通过 `this.$refs.form.addRule` 方法来添加规则,其中第一个参数为要验证的字段名,第二个参数为验证规则函数,如果验证失败,需要返回一个错误提示信息。
阅读全文