uniapp uView表单校验中 单选框 Radio不管是否添加必填校验都会被校验！

问题

最近项目做一个微信小程序，在开发过程中遇到了一些问题，关于uniapp uView表单校验已经单选框 Radio的bug，记录一下。

发现

一、单选框Radio中传递的不是字符串

先看代码

<u-radio-group v-model="form.repeat" placement="row" @change="groupChange">
	<u-radio style="margin-right: 10px;" label="重复" name="1"> </u-radio>
	<u-radio style="margin-right: 10px;" label="不重复" name="0"> </u-radio>
</u-radio-group>

groupChange(val) {
	console.log(val, 1, '1')
},

如果不是字符串，会出现一下问题

数字会被转为字符串，这时候会出现问题！
解决方法

<u-radio-group v-model="form.repeat" placement="row" @change="groupChange">
	<u-radio style="margin-right: 10px;" v-for="(item, index) in list" :key="index" :label="item.label" :name="item.name"> </u-radio>
</u-radio-group>

list: [{
		label: '重复',
		name: 1
	},
	{
		label: '不重复',
		name: 0
	},
],

二、表单校验时单选框 Radio未加校验但是被校验了（不一定会触发）

解决方法
添加上校验即可，毕竟单选一定会有一个值。
当然有些需求是单选框可以为空，也就是不选（不显示），这时候最好用v-if，不要使用v-show！！！

完整代码

<template>
	<view class="content">
		<scroll-view scroll-top="0" scroll-y="true" class="scroll-Y">
			<view class="form-style">
				<uni-forms ref="form" :modelValue="form" :rules="rules" label-position="top" labelWidth="120px">
					<uni-forms-item label="姓名" name="name" required>
						<uni-easyinput v-model="form.name" placeholder="请输入姓名" />
					</uni-forms-item>
					<uni-forms-item label="是否重复" name="repeat">
						<u-radio-group v-model="form.repeat" placement="row">
							<u-radio style="margin-right: 10px;" label="重复" name="1"> </u-radio>
							<u-radio style="margin-right: 10px;" label="不重复" name="0"> </u-radio>
							<!-- <u-radio style="margin-right: 10px;" v-for="(item, index) in list" :key="index"
								:label="item.label" :name="item.name"> </u-radio> -->
						</u-radio-group>
					</uni-forms-item>
					<uni-forms-item>
						<button type="primary" @click="submit('form')">提交</button>
					</uni-forms-item>
				</uni-forms>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// list: [{
				// 		label: '重复',
				// 		name: 1
				// 	},
				// 	{
				// 		label: '不重复',
				// 		name: 0
				// 	},
				// ],
				form: {
					name: '', // 姓名
					repeat: 0, // 重复使用 1是 0否
				},
				// 校验规则
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					// repeat: {
					// 	rules: [{
					// 		required: true,
					// 		errorMessage: '请选择状态'
					// 	}]
					// }
				}
			}
		},
		methods: {
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					let obj = {
						name: this.form.name, // 姓名
						repeat: this.form.repeat, // 是否重复使用
					}
					this.$Api.sumbit(obj).then(
						res => {
							uni.showToast({
								title: `提交完成`
							})
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1000)
						},
						err => {}
					)
				}).catch(err => {
					console.log('err', err);
				})
			}
		}
	}
</script>