一个vxe-form中有两个表单项,一个是布尔值,一个是数字。如何校验当布尔值为true时数字必须为正数?
时间: 2024-02-21 12:02:18 浏览: 86
可以在 vxe-form 中对需要校验的表单项设置校验规则,其中对数字表单项的校验规则中,可以通过设置 validator 方法来实现当布尔值为 true 时数字必须为正数的校验。具体实现步骤如下:
1. 在 vxe-form 中对需要校验的表单项设置校验规则,例如:
```html
<vxe-form ref="form" :model.sync="formData">
<vxe-form-item prop="boolValue" label="布尔值">
<vxe-switch v-model="formData.boolValue"></vxe-switch>
</vxe-form-item>
<vxe-form-item prop="numberValue" label="数字">
<vxe-input v-model="formData.numberValue"></vxe-input>
<span slot="append">请填写数字</span>
<span slot="message" class="vxe-form-item--message"></span>
<span slot="errorMsg" class="vxe-form-item--error"></span>
</vxe-form-item>
</vxe-form>
```
2. 在校验规则中设置 validator 方法,该方法接收两个参数:rule 和 value,分别代表当前校验规则和当前校验的表单项的值。在 validator 方法中可以通过 this.$refs.form 取得整个表单组件实例,进而取得其他表单项的值进行校验。例如:
```js
validations: {
boolValue: [
{required: true, message: '布尔值不能为空'}
],
numberValue: [
{required: true, message: '数字不能为空'},
{
validator: (rule, value) => {
const boolValue = this.$refs.form.getFieldValue('boolValue')
if (boolValue && value <= 0) {
return new Error('当布尔值为true时数字必须为正数')
}
return true
}
}
]
}
```
在上面的校验规则中,对数字表单项的校验规则中设置了 validator 方法,该方法通过 this.$refs.form.getFieldValue('boolValue') 取得布尔值的值,然后判断当布尔值为 true 时数字是否为正数,如果不是,则返回错误信息。
这样就可以校验当布尔值为 true 时数字必须为正数了。
阅读全文