<el-form
      :model="form"
      :rules="rules"
      ref="formRef"
      style="max-width: 640px"
      label-width="115px"
      class="demo-ruleForm"
      label-position="right"
    >
         <el-form-item label="手机号码：" prop="telphone" class="item">
            <el-input
              placeholder="请输入手机号码"
              autocomplete="off"
              v-model="form.telphone"
              style="max-width: 400px"
            ></el-input>
          </el-form-item>
          <el-form-item label="邮箱地址：" prop="email" class="item">
            <el-input
              placeholder="请输入邮箱地址"
              autocomplete="off"
              v-model="form.email"
              style="max-width: 400px"
            ></el-input>
          </el-form-item>
</el-form>

import type { FormInstance} from "element-plus";
 let validateEmail = (rule, value, callback) => {
      if (!value) {
       return callback(new Error("邮箱不能为空！"));
      }
      else {
        const reg=/^[1-9][0-9]{4,}@qq.com$/
        if(reg.test(value)){
          callback();
        }else {
            return callback(new Error("邮箱格式不正确！"));
          } 
      }
    };
    var checkPhone = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('手机号不能为空'));
        } else {
          //验证手机号
          const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
          //验证区号
          const phoneReg = /^\d{3}-\d{8}|\d{4}-\d{7}$/ 
          console.log(reg.test(value));
          if (reg.test(value)||phoneReg.test(value)) {
            callback();
          } else {
            return callback(new Error('请输入正确的联系电话'));
          }
        }
      };
 const rules = reactive({
      nickname: [
        { required: true, message: "请输入昵称", trigger: "blur" },
        { min: 3, message: "长度在3个字符以上", trigger: "blur" },
      ],
      email: [{ required: true, validator: validateEmail, trigger: "blur" }],
      telphone: [{ required: true, validator: checkPhone, trigger: "blur" }],
      code: [
       {
                trigger: "blur",
                 validator: function (rule, value, callback) {
                  if (value&&/^[0-9]{6}$/.test(value) == false) {
                    callback(new Error("请输入正确的邮政编码"));
                  } else {
                    callback();
                  }
                },
              }
      ],
    });

 const saveForm = async (formEl: FormInstance | undefined) => {
       console.log("进入点击");
      if (!formEl) return;
      await formEl.validate((valid) => {
        console.log("开始校验")
        if (valid) {
          console.log(1)
          updateUserInfo(form).then((res) => {
            if (res.success) {
              console.log("提交了");
            } else {
              console.log("发送失败");
            }
          });
          formEl.resetFields();
        } else {
          console.log("校验不通过");
        }
      });
    };

注意：

require：true：代表是必须填的  不能为空  还显示前面的*号

require：false：代表是必须填的  不能为空  只是不显示前面的*号

但是如果不写require这个属性，那就代表可以不填

上面的code检验的是 /只能填6位数字/，/不显示*号/  /不是必须填的/。

 trigger: "blur"去掉这句，就可以实时校验。