前言

在实际开发中，少不了要做提交表单的动作，其中必会遇到表单校验。所谓的表单校验是指在提交表单的时候，在前端校验这些表单项是否符合我们的逻辑规则，如果符合就提交给后端，否则提交失败。举个例子：比如输入账号密码，账号密码不能为空，我们前端做校验如果这两个值为空就不能进行下一步操作，下面来看看简单的表单校验是怎么实现的。

一、简单表单校验实现步骤

1.在表单组件el-form绑定ref值和model数据源，以及校验规则rules

如下代码示例：

<template>
//1.在表单组件el-form绑定ref值和model数据源，以及校验规则rules
  <el-form ref="formRef" :model="form" :rules="rules" label-position="top">
        <el-col :span="8">
          <el-form-item  label="账号" prop="userId">
            <el-input v-model="form.userId" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="密码" prop="password">
            <el-input v-model="form.password" placeholder="请输入" />
          </el-form-item>
        </el-col>
   </el-form>
   <el-button size="large" type="primary" @click="submitForm">
        提交
    </el-button>
 </template>
<script setup lang="ts">
import { FormRules, FormInstance } from 'element-plus'
import { reactive, ref } from 'vue'
const formRef = ref<FormInstance>()
//2.定义数据源
const form = reactive({
  userName: '',
  password: ''
})
//3.定义校验规则
const rules = reactive<FormRules>({
  userName: [
    { required: true, message: '必填项目', trigger: 'blur' },
    { asyncValidator: validateCheck, trigger: 'blur' }
  ],
  password: [{ required: true, message: '必填项目', trigger: 'blur' }]
  //required为true表示必填，如果为空就提示message中的信息；如果表单项是el-select选择器的话，trigger的值为‘change’
})

//4.表单提交按钮点击触发验证方法
async function submitForm() {
  await formRef.value?.validate((valid) => {
    if (valid) {
    //如果校验通过，执行相应的动作
    }
  })
}
</script>

以上代码步骤大概就是我们平时写表单校验的流程了，

二、asyncValidator自定义验证规则

有时上面的简单验证不能满足我们的需求，我们需要根据自己的逻辑判断，这时就该轮到asyncValidator出场了。asyncValidator通过接收一个自定义方法来自定义验证规则，
function(source, [options], callback): Promise
参数：
①source 要验证的对象（必选)
②[options] 验证处理选项对象（可选）
③callback 验证完成时调用的回调函数（可选）

如下代码：

const rules = reactive<FormRules>({
  userName: [
    { required: true, message: '必填项目', trigger: 'blur' },
    { asyncValidator: validateCheck, trigger: 'blur' }
  ]
})

const validateCheck= async (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('用户名为空！'))
  } else {
    const res = await validateUserid({ userId: value })
    if (res && !res.result) {
      callback(new Error('用户名不存在，请先注册！'))
    }
    callback()
  }
}