uview表单单选框(u-radio-group,vue3)验证错误

表单单选框关联两个值,上传的结果分别为数字0和数字1,但是勾选了,仍然无法通过验证,提示我们需要勾选

表单单选框关联的值是form.memberOnly,默认值为0

u-radio中的:name="item.value"关联的是u-radio-group中的 v-model="form.memberOnly"

<u-form-item label="仅会员可见" label-width='200' label-position="left" prop="memberOnly" :required="true">
	<u-radio-group v-model="form.memberOnly" @change="radioGroupChange">
		<u-radio @change="radioChange" v-for="(item, index) in memberOnlyList" :key="index" 
		:name="item.value">
			{{item.name}}
		</u-radio>
	</u-radio-group>
</u-form-item>
	let form = reactive({
		name: '',
    content:'', //产品介绍
    memberOnly: 0, //1 仅会员可见,0:所有人可见
		url: '', //上传的图片
    // status:'0', //状态 正常
	});
const memberOnlyList = reactive([{name:'是',value:1},{name:'否',value:0}])
// 选中某个单选框时,由radio时触发
const	radioChange=(e)=> {
	console.log('选-单',e);
}
// 选中任一radio时,由radio-group触发
const	radioGroupChange=(e)=> {
	console.log('选-全',e);
}
//设置的表单规则
const rules = reactive({
  memberOnly: {
  	required: true,
  	message: "请选择是否会员可见",
  	trigger: "blur"
  },
})

值为 0

值为1

原因:这里我暂时没找到什么原因,欢迎大家补充解答

解决方法:1.如果非必要上传数字,可以将值换成字符串

let form = reactive({
    memberOnly: '0', //1 仅会员可见,0:所有人可见
    });

const memberOnlyList = reactive([{name:'是',value:'1'},{name:'否',value:'0'}])

可以通过验证:

方法2:

如果必须上传数字,则需要在表单验证规则rules中写上它的类型:

加上该值的类型   type: 'number', 验证也可以通过

memberOnly: {
    type: 'number',
      required: true,
      message: "请选择是否会员可见",
      trigger: "blur"
  },

  • 6
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值