单个验证 统一验证 自定验证
注意：prop为当前字段的name值，必填
1.加入ref=“ruleFormRef” :rules=“rules”
2.写prop
3.导入import type { FormInstance, FormRules } from “element-plus”;
4.加入对象值 并给每个字段的 v-model绑定值

// FormRules类型
const ruleFormRef = ref<FormInstance>();
// 里面放对象
const ruleForm = reactive({
  userId: "",
  email: "test@qq.com",
  pwd1: "",
  pwd2: "",
});

5.加入规则

//校验的规则
const rules = reactive<FormRules>({

6.完整代码

<template>
  <div id="logindiv">
    <el-row justify="center" align="middle" style="height: 90vh">
      <el-col :span="12">
        <el-card class="box-card">
          <template #header>
            <div class="card-header"  align="middle">
              <span>欢迎使用北猫商城管理系统</span>
            </div>
          </template>
         <!-- :rules="rules"定义校验的规则 -->
          <el-form :model="ruleForm" label-width="120px" ref="ruleFormRef" :rules="rules">
           
            <el-form-item label="账号:" prop="userId">
              <el-input v-model="ruleForm.userId" placeholder="请输入您的账号" />
            </el-form-item>

            <el-form-item label="邮箱:" prop="email">
              <el-input v-model="ruleForm.email" placeholder="请输入您的邮箱" />
            </el-form-item>

            <el-form-item label="密码:" prop="pwd1">
              <el-input
                v-model="ruleForm.pwd1"
                type="password"
                placeholder="请输入您的密码"
              />
            </el-form-item>

            <el-form-item label="确认密码:" prop="pwd2">
              <el-input
                v-model="ruleForm.pwd2"
                type="password"
                placeholder="再次输入密码"
              />
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
              <el-button @click="resetForm(ruleFormRef)">重填</el-button>
            </el-form-item>
          </el-form>

        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { storeToRefs } from "pinia";
import type { FormInstance, FormRules } from "element-plus";
import appStore from "@/store/appStore";
let { name, token } = storeToRefs(appStore());

const inputValue = ref("");
// FormRules类型
const ruleFormRef = ref<FormInstance>();
// 里面放对象
const ruleForm = reactive({
  userId: "",
  email: "test@qq.com",
  pwd1: "",
  pwd2: "",
});
//自定义校验规则
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请再次输入密码"));
  } else if (value !== ruleForm.pwd1) {
    callback(new Error("两次密码不匹配!"));
  } else {
    callback();
  }
};
//校验的规则
const rules = reactive<FormRules>({
  userId: [
    { required: true, message: "请输入邮箱", trigger: "blur" },
    { min: 3, max: 5, message: '至少 3 to 5', trigger: 'blur' },

  ],
  email: [
    { required: true, message: "请输入邮箱", trigger: "blur" },
    //{ min: 3, max: 5, message: '至少 3 to 5', trigger: 'blur' },
    {
      type: "email",
      message: "请输入正确的邮箱地址",
      trigger: ["blur", "change"],
    },
  ],
  pwd1: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, message: "至少 6", trigger: "blur" },
  ],
//  trigger: "blur"焦点 change改变
  pwd2: [{ validator: validatePass2, trigger: "blur" }],
});

const callApi = () => {
  console.log("校验成功");
};

// 登录固定格式 需要修改的为  if (valid) {里面的
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      //验证成功，执行下面方法
      callApi();
    } else {
      // console.log('error submit!', fields)
    }
  });
};

// 重置固定格式
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>
<style scoped>
#logindiv {
  background: url("../assets/login.jpeg");
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
}
.title {
  color: white;
}
</style>

//单个验证
// const submitForm = () => {
 
//   if(ruleForm.userId==""){
//     ElMessage({
//       message:'账号不能为空',
//       type:'warning',
//     })
//     return;
//   }
// };