使用uniapp的表单验证组件

<uni-section title="地址信息" type="line" padding="30rpx">
			<view class="example">
				<!-- 基础表单校验 -->
				<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
					<uni-forms-item label="收件人" required name="recipients">
						<uni-easyinput v-model="valiFormData.recipients" placeholder="请输入收件人" />
					</uni-forms-item>
					<uni-forms-item label="手机号" required name="recipientsNumber">
						<uni-easyinput v-model="valiFormData.recipientsNumber" placeholder="请输入手机号" />
					</uni-forms-item>
					<uni-forms-item label="所在地区" required name="addressName">
						<uni-easyinput v-model="valiFormData.addressName" placeholder="请输入所在地区" />
					</uni-forms-item>
					<uni-forms-item label="详细地址" required name="addressInfo">
						<uni-easyinput v-model="valiFormData.addressInfo" placeholder="请输入详细地址" />
					</uni-forms-item>
				</uni-forms>
				<button @click="submit"
					style="background: linear-gradient(127deg, #29C16A 0%, #2A9F96 100%);border-radius: 25rpx;color: #fff;">提交</button>
			</view>
		</uni-section>

const valiForm = ref(null)
	const flag = ref(true)
	const valiFormData = reactive({
		recipients: '',
		recipientsNumber: '',
		addressName: '',
		addressInfo: ''
	})
	
	const rules = reactive({
		recipients: {
			rules: [{
				required: true,
				errorMessage: '收件人不能为空'
			}]
		},
		recipientsNumber: {
			rules: [{
				required: true,
				errorMessage: '手机号不能为空'
			}]
		},
		addressName: {
			rules: [{
				required: true,
				errorMessage: '地址不能为空'
			}]
		},
		addressInfo: {
			rules: [{
				required: true,
				errorMessage: '地址详情不能为空'
			}]
		},
	})

//点击确定
const submit = async () => {
		if (valiForm.value) {
			try {
				const isValid = await valiForm.value.validate();
				if (isValid) {
					isValid.userId = uni.getStorageSync("userId");
					if (flag.value) {
						addAddress(isValid)
					} else {
						changeaddress(isValid)
					}
				} else {
					console.log('校验失败');
				}
			} catch (err) {
				console.log('err', err);
			}
		}
	};