Ant Design antdv Vue表单验证rangePicker

Ant Design antdv Vue3  表单验证rangePicker，验证图片上传

setup(props,context) {
    let formState = reactive({} as FormState);
    const formRef = ref<FormInstance>();
    let validateRangePicker = async (_rule: Rule, value: any) => {
      if (!value[0] || !value[1]) {
        return Promise.reject('请填写运输时间');
      } else {
        return Promise.resolve();
      }
    };


const rules: Record<string, Rule[]> = {

      rangePicker: [{ type: 'array', required: true,  validator: validateRangePicker, trigger: 'blur' }],
      
      fileList: [{  required: true,  message: '请上传车载物图片', trigger: 'blur' }],
    };|

....
....


return {
      formRef,
      rules,
......





  <a-form-item ref="rangePicker" label="运输时间" name="rangePicker">
          <a-range-picker
            v-model:value="formState.rangePicker"
            show-time
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            :disabled="disabled"
          />
        </a-form-item>


// 这里重点就是name 要和rules 对应起来 相当于id
 <a-form-item label="照片" name="fileList">
          <a-upload
            v-model:file-list="fileList"
            :disabled="disabled"

大概代码就是这样的，懂得一看就明白了。  不懂的 怎么说也白搭

antdesign  vue 用的人是真少