uniapp uview-plus form表单验证

uniapp uview-plus form表单验证

最近在写表单验证这一块，包括时间，性别，图片上传，话不多说直接上代码

<template>
    <view class="register p24 bgf">
        <up-form :model="form" ref="uFormRef" :rules="rules" labelWidth="100" :borderBottom="true">
            <up-form-item label="姓名" prop="name">
                    <up-input v-model="form.name" placeholder="请输入" border="false" inputAlign="right" />
            </up-form-item>
            <up-line></up-line>
            <up-form-item label="健康证到期时间" @click="showTime = true" prop="expireTimeText" labelWidth="130">
                    <up-input v-model="form.expireTimeText" placeholder="请选择" border="false" inputAlign="right" disabled
                            disabledColor="#ffffff" />
            </up-form-item>
            <up-datetime-picker v-model="form.expireTime" :show="showTime" @confirm="timeConfirm"
                    @cancel="showTime=false" mode="date" format="YYYY-MM-DD" :formatter="formatter" ref="datetimePickerRef">
            </up-datetime-picker>
            <up-line></up-line>
            <up-form-item label="性别" prop="sex" labelWidth="130" @click="showSex = true">
                    <up-input v-model="form.sex" placeholder="请选择" border="false" inputAlign="right" disabled
                            disabledColor="#ffffff" />
            </up-form-item>
            <up-action-sheet :show="showSex" :actions="sexActions" title="请选择性别" @close="showSex = false"
                    @select="handleSexSelect">
            </up-action-sheet>
            
            
            <up-form-item label="身份证正面" prop="idCardFront">
                <view class="flex flex-end flex1">
                        <up-upload :fileList="uploadImg['IDImg']" @afterRead="handleUpload($event, 'IDImg')"
                                @delete="handleDelPic($event, 'IDImg')" :maxCount="1" width="76rpx" height="76rpx"
                                style="flex: initial;">
                        </up-upload>
                </view>
                </up-form-item>
        </up-form>
        <up-button @click="handleRegister" type="primary">注册</up-button>
	</view>
</template>

//写了一个hook，可以在uview-plus复制上传那块的代码
const { handleUpload, uploadImg, handleDelPic } = useOssUpload()

onReady(() => {
        // 微信小程序需要用此写法
        datetimePickerRef.value.setFormatter(formatter);
});

const uFormRef = ref(null)
const form = reactive({
        name: '',
        expireTime: Date.now(),
        expireTimeText: '',
        sex: '',
        idCardFront: ''

})
const rules = {
    name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
    expireTimeText: [{ required: true, message: '请选择到期时间', trigger: ['blur', 'change'] }],
    sex: [{ required: true, message: '请选择性别', trigger: ['blur', 'change'] }],
    idNumber: [{ required: true, message: '请输入身份证号', trigger: 'blur' }]

//图片上传后监听
watch(uploadImg.value, (newVal, oldVal) => {
    if (newVal.IDImg) {
        form.idCardFront = newVal.IDImg[0]
        uFormRef.value.clearValidate('idCardFront')//清除单个验证信息
    }
}
}
//选择性别
const showSex = ref(false)
const sexActions = [
    { name: '男' },
    { name: '女' },
    { name: '保密' }
]
const handleSexSelect = (e) => {
    form.sex = e.name;
    if (uFormRef.value) {
            uFormRef.value.validateField('sex');
    }
}
// 选择时间
const datetimePickerRef = ref(null)
const showTime = ref(false)
const formatter = (type, value) => {
    if (type === 'year') {
            return `${value}年`;
    }
    if (type === 'month') {
            return `${value}月`;
    }
    if (type === 'day') {
            return `${value}日`;
    }
    return value;
}
const timeConfirm = (e) => {
    form.expireTimeText = timeFormat(e.value, 'yyyy-mm-dd')
    form.expireTime = e.value
    showTime.value = false
    if (uFormRef.value) {
            uFormRef.value.validateField('expireTimeText');
    }
}
const handleRegister = async () => {
    uFormRef.value.validate().then(res => {
            // uni.$u.toast('校验通过')
            console.log(res, '成功');
            // return
    }).catch(err => {
            console.log(err, '校验失败');
            // return
    })

}