element-plus表单校验走el-form的rules——vue3

前提

有一个el-from有校验规则，不能为空。我写的规则为必填，失焦触发校验：

const state = reactive({
  users: [],
  currentPage: 1, // 当前页
  pagesize: 2, // 每页显示2条
  userFormDialogVisble: false, // 是否展示用户表单
  userFormData: {
    username: ''
  },
  rules: {
    username: [
      {
        required: true,
        message: "请输入用户名",
        trigger: 'blur'
      },
    ]
  },
  formTitle: "",
  showSetRoleDialog: false,
  currentUserId: 0,
})

正常的交互应该是：

但是当用户进入该页面不点击输入框的时候，就不会触发校验逻辑，可以向后端提交一个空。
我当时亡羊补牢的做法是，单独加一个判断，判断该字段是否为空：

const handleConfirm = () => {
  if (state.userFormData.username === "") {
    ElMessage.error("用户名不能为空")
  } else {
		//逻辑
	}

后面带佬指出：这就是shi代码，这个逻辑简单我可以这么写。如果需要校验的字段很多，就需要一个一个去判断，而且展示也会出问题，ElMessage展示出来的永远之后最后面的错误，改完最后一个错误才会向前校验。
查阅文档发现el-form自带校验逻辑：validate。用法就是ref.validate。

vue3与2获取DOM的方法略有一丝不同：
给需要获取的html元素加ref：

<el-form ref="userForm" :model="state.userFormData" label-width="100px" :rules="state.rules">

创建ref响应式常量，名字要与html中的ref名字一致。

import {......, ref } from 'vue';

//创建ref响应式常量
const userForm = ref<any>()

再点击事件中添加判断，用法为ref.validate：

// 新增用户或修改用户
const handleConfirm = () => {
  userForm.value.validate((value: boolean) => {
    if (value) {
		// 逻辑
	}