Vant4 的单选框组件 Radio没有rules属性,怎么校验?
时间: 2024-03-27 07:39:10 浏览: 98
Vant4 的 Radio 组件确实没有 rules 属性,但是可以通过监听 change 事件,手动进行校验。具体实现步骤如下:
1. 在表单中添加 ref 属性,方便后续操作。
2. 在 change 事件中,获取当前选中的值,并根据需要进行校验。
3. 如果校验不通过,可以通过 ref 属性获取到 Radio 组件,并手动设置错误提示信息。
以下是示例代码:
```html
<template>
<van-form ref="form" @submit="onSubmit">
<van-radio-group v-model="radioValue" @change="onRadioChange">
<van-radio name="1" label="选项1" />
<van-radio name="2" label="选项2" />
<van-radio name="3" label="选项3" />
</van-radio-group>
<van-button type="primary" native-type="submit">提交</van-button>
</van-form>
</template>
<script>
export default {
data() {
return {
radioValue: '',
};
},
methods: {
onSubmit() {
// 提交表单
},
onRadioChange(value) {
// 校验
if (value === '') {
const radioGroup = this.$refs.form.fields.find(field => field.name === 'radioValue');
radioGroup.setError('请选择一个选项');
} else {
const radioGroup = this.$refs.form.fields.find(field => field.name === 'radioValue');
radioGroup.clearError();
}
},
},
};
</script>
```
以上示例中,通过获取表单 ref 属性,可以通过 this.$refs.form 获取到表单中的 Radio 组件。在 onRadioChange 方法中,根据当前选中的值进行校验,如果校验不通过,使用 setError 方法设置错误提示信息;如果校验通过,使用 clearError 方法清除错误提示信息。
阅读全文