Ant Design Vue 表单常用点

1、单独校验单个表单项

<a-form-model ref="form">
  //这里放你所展示的表单控件
   <a-form-model-item label="姓名" prop="name">
      <a-input v-model="testName" autocomplete="off" />
    </a-form-model-item>
   <a-button v-if="isShow == false" @click="OKclick">确定</a-button>
</a-form-model>
<script setup>
  const OKclick=()=> {
    //校验所有表单项的校验
    formRef2.value.validate().then((res)=>{
        consloe.log(res)
    });
    //校验其中的某一项
    formRef.value.validate('businessManager');    
 },
</script>

2、校验移除clearValidate()

<a-form-model ref="form">
  //这里放你所展示的表单控件
   <a-form-model-item label="姓名" prop="name">
      <a-input v-model="testName" autocomplete="off" />
    </a-form-model-item>
   <a-button v-if="isShow == false" @click="handleCancel">取消</a-button>
</a-form-model>
<script setup>
  const handleCancel=()=> {
    //移除所有表单项的校验
    formRef2.value.clearValidate(); 
    //移除其中的某一项校验
    formRef.value.clearValidate('businessManager');    
 },
</script>

3、表单单项校验单项

<a-form-item label="选择有效期" name="idCardValidTimeStart">
   <a-date-picker v-model:value="state.idCardValidTimeStart" />
</a-form-item>
<script setup>
   const state = reactiv({idCardValidTimeStart:''})
   const rules = {
       idCardValidTimeStart: [
        {
          validator: async () => {
            if (!state.idCardValidTimeStart) {
              return Promise.reject('请选择法人身份证开始时间');
            }
            return Promise.resolve();
          },
          trigger: 'change',
        },
      ],
   };
    
  //点击校验
  const formCheck.value.validate().then(()=>{
    //校验成功会进入
  })
    
</script>

4、表单单项设置多项自定义校验

<a-form-item label="注册地址" name="companyAddress" required>
      <a-form-item-rest>   <!-- a-form-item-rest不进入校验 -->
          <a-cascader
            v-model:value="state.areaCopy"
            :options="state.areaList"
            placeholder="请选择注册地址"
            style="width: 320px"
            :fieldNames="{
              label: 'name',
              value: 'code',
              children: 'children',
            }"
          />
        </a-form-item-rest>
        <a-textarea
          class="textarea-top"
          placeholder="请填写详细地址，例：12号楼8层801室"
          :rows="4"
          showCount
          v-model:value="state.companyAddress"
          :maxlength="128"
          @blur="formCheck.validate('companyAddress').catch(() => {})"
      ></a-textarea>
</a-form-item>

<script setup>
   const state = reactiv({area:[],companyAddress:''})
   const rules = {
        companyAddress: [
        {
          validator: () => {
            if (!state.area.length || !state.companyAddress) {
              return Promise.reject('请选择并填写注册地址');
            }
            return Promise.resolve();
          },
          trigger: 'change',
        },
      ],
   };
    
  //点击校验
  const formCheck.value.validate().then(()=>{
    //校验成功会进入
  })
    
</script>

5、表单校验数组格式

<a-form-item label="试业期限" name="businessTime">
     <a-range-picker v-else v-model:value="state.businessTime" style="width: 400px" />
</a-form-item>
<script setup>
   const state = reactiv({businessTime:[]})
   const rules = {
       businessTime: [
        {
          required: true,
          message: '请选择试业期限',
          trigger: 'change',
          type: 'array',
        },
      ],
   };
    
  //点击校验
  const formCheck.value.validate().then(()=>{
    //校验成功会进入
  })
    
</script>

6、校验输入框普通类型

<a-form-item label="我的姓名" name="myName">
    <a-textarea
            v-model:value="state.myName"
            :rows="3"
            showCount
            :maxlength="128"
            placeholder="请按照身份证地址填写,如广东省广州市黄埔区xx路xx号xx室"
     />
</a-form-item>
<script setup>
   const state = reactiv({myName:''})
   const rules = {
       myName: [
          {
          required: true,
          message: '请输入我的名字',
          trigger: 'blur',
        },
      ],
   };
    
  //点击校验
  const formCheck.value.validate().then(()=>{
    //校验成功会进入
  })
    
</script>

7、上传或变动事件Change校验（单项）

<a-form-item label="图片" name="myImage">
   <a-image :src="state.businessAuthorizationLetterUrl" />
    <a-upload
      name="avatar"
      class="avatar-uploader"
      accept="image/*"
      :multiple="false"
      :file-list="state.fileList"
      :before-upload="beforeUpload"
      :customRequest="businessAuthorizationLetter"            
    >
      <a-button>上传图片</a-button>
    </a-upload>
</a-form-item>
<script setup>
   const state = reactiv({myImage:''})
    const beforeUpload = file => {
      const isJpgOrPng =
        file.type === 'image/png' ||
        file.type === 'image/bmp' ||
        file.type === 'image/jpg' ||
        file.type === 'image/jpeg';
      if (!isJpgOrPng) {
        message.error('请上传png,bmp或者png格式文件!');
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        message.error('图片大小不得超过2M!');
      }
      return isJpgOrPng && isLt2M;
    };

   const rules = {
       myImage: [
          {
          required: true,
          message: '请输入我的图片',
          trigger: 'change',
        },
      ],
   };
    
  //点击校验
  const formCheck.value.validate().then(()=>{
    //校验成功会进入
  })
    
</script>