vue3 antdv 表单校验

表单验证

<a-modal
        :keyboard="false"
        :maskClosable="false"
        :closable="false"
        width="30%"
        class="paginate"
        cancelText="取消"
        okText="确定"
        v-model:visible="visibleNode"
        @cancel="handleCancel"
        @ok="handleOk"
      >
      
        <a-form
          ref="formRef"
          name="custom-validation"
          :model="formState"
          v-bind="layout"
          :rules="[{ required: true, message: '不能为空' }]"
        >
          <div class="" style="margin-left: 3px">
            <a-form-item
              has-feedback
              label="编码"
              name="formState_bm"
              :rules="[{ required: true, message: '编码不能为空' }]"
            >
              <a-input
                size="small"
                placeholder="编码"
                v-model:value="formState.formState_bm"
              ></a-input>
            </a-form-item>
          </a-form>
      </a-modal>

let formRef = ref("");


// 点击确定的时候进行表单验证
const handleOk = () => {
  formRef.value
    .validateFields()
    .then((values) => {
      postCheckinstrumentationAdd(); // 发送请求    visibleNode.value = false; // 关闭对话框在请求成功之后
      
    })
    .catch((info) => {
      console.log("失败:", info);
    });
};

表单重置

formRef.value.resetFields(); //重置表单

清除校验-单独清除某一项的校验

formRef.value.clearValidate("formState_bm");  // 清除name="formState_bm"的那一项的校验
formRef.value.clearValidate("name");  // 清除name="name"的那一项的校验