vue3 elementplus input框输入内容一直转圈,单击按钮提交表单没有反应。

在用elementplus做项目的时候，遇到一个表单提交时出现的错误，就是在表单提交之前进行了非空校验，但是提交的时候单击提交按钮无法进行提交，没有反应。

问题再现：为了简化代码，我只抽取了部分，就拿nickName这个属性来演示

<template>
  <div class="border1">
    <div style="height: 40px;width: 100%;"></div>
    <div class="border">
      <h3 style="text-align: center;padding-top: 20px">请填写报名信息</h3>
      <div style="width: 40%;margin: 30px 25%">
        <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            status-icon
            :rules="rules"
            label-width="120px"
        >
          <el-form-item label="姓名" prop="nickName">
            <el-input v-model="ruleForm.nickName" type="text" autocomplete="off" placeholder="请输入姓名"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)"
            >提交报名
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>

</template>

<script lang="ts" setup>

import {onMounted, reactive, ref} from 'vue'
import type {FormInstance} from 'element-plus'

const ruleFormRef = ref<FormInstance>()

const ruleForm = reactive({
  nickName: "",
})

const validateNickName = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入姓名'))
  }
}


const rules = reactive({
  nickName: [{validator: validateNickName, trigger: 'blur'}],
})

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
     console.log("success submit");
    } else {
     console.log("error submit");
      return false
    }
  })
}
</script>

单击按钮之后，没有任何反应，思考了好久，打算去看看官方文档，发现在判断value值是否为空之后还有else callback()

const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('Please input the password again'))
  } else if (value !== ruleForm.pass) {
    callback(new Error("Two inputs don't match!"))
  } else {
    callback()
  }
}

 加上这句，问题完美解决！