uniapp单选框的表单校验代码
时间: 2023-07-09 20:46:21 浏览: 140
表单验证代码
uniapp中的单选框表单校验可以使用`v-model`指令配合`required`属性来实现。具体代码如下:
```html
<template>
<form>
<div>
<label>
<input type="radio" value="male" v-model="gender" required>男
</label>
<label>
<input type="radio" value="female" v-model="gender" required>女
</label>
</div>
<button @click.prevent="submitForm">提交</button>
</form>
</template>
<script>
export default {
data() {
return {
gender: '' // 存储单选框选中的值
}
},
methods: {
submitForm() {
if (!this.gender) {
uni.showToast({
title: '请选择性别',
icon: 'none'
})
return
}
// 校验通过,执行提交操作
// ...
}
}
}
</script>
```
在上面的代码中,我们使用了`v-model`指令来绑定单选框的选中值到`gender`变量中,同时添加了`required`属性来表示该表单项是必填项。在`submitForm`方法中,我们判断是否选择了性别,如果没有选择,就弹出提示框;如果选择了,就执行表单提交操作。
阅读全文