vant4单选radio校验
时间: 2023-12-09 09:07:08 浏览: 536
三种取消选中单选框radio的方法
5星 · 资源好评率100%
Vant4 的单选框组件 Radio 提供了多种校验方式,可以通过设置 rules 属性来实现单选框的校验。
下面是一个使用 rules 属性的 Radio 示例:
```html
<van-radio-group v-model="radio" :rules="[{ required: true, message: '请选择一个选项' }]">
<van-radio label="apple">苹果</van-radio>
<van-radio label="banana">香蕉</van-radio>
<van-radio label="orange">橙子</van-radio>
</van-radio-group>
```
在上述示例中,RadioGroup 设置了 `rules` 属性,其中 `required` 表示必选项,`message` 是校验失败时显示的错误信息。
需要注意的是,如果 RadioGroup 上设置了 `rules` 属性,则每个 Radio 上不需要再设置 `required` 属性,否则会出现冲突,导致校验失效。
如果需要对单选框的合法性进行更复杂的校验,可以使用 `validator` 属性来设置自定义校验函数。例如:
```html
<van-radio-group v-model="radio" :rules="[{ validator: validateRadio, message: '请选择一个选项' }]">
<van-radio label="apple">苹果</van-radio>
<van-radio label="banana">香蕉</van-radio>
<van-radio label="orange">橙子</van-radio>
</van-radio-group>
```
在上述示例中,RadioGroup 设置了 `validator` 属性,并指定了一个名为 `validateRadio` 的校验函数。校验函数接收两个参数:当前选中的值和所有选项的值,需要返回一个布尔值或 Promise 对象来表示校验结果。
阅读全文