vue3中结合element常用表单自定义正则校验

效果如图

部分表单结构（只举例其中4个典型的）：

<el-form
        :inline="false"
        :model="formData"
        :rules="formMethod.rules"
        label-width="140px"
        ref="form"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="公司名称：" prop="company" class="newInput">
              <el-input
                v-model.trim="formData.company"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="网址：" prop="website" >
              <el-input
                v-model.trim="formData.website"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="邮编：" prop="zipCode" >
              <el-input
                v-model.trim="formData.zipCode"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!--地图 plat -->
        <el-row>
          <el-form-item label="地图图片：" prop="plat" >
            <el-upload
              action="#"
              :class="{
                disabled: formMethod.fileList.length > 0 ? 'disabled' : '',
              }"
              list-type="picture-card"
              :limit="1"
              :on-change="formMethod.addFile"
              :auto-upload="false"
              :on-preview="formMethod.handlePictureCardPreview"
              :on-remove="formMethod.handleRemove"
              :file-list="formMethod.fileList"
            >
              <el-icon><Plus /></el-icon>
            </el-upload>
          </el-form-item>
        </el-row>
        
       
        <el-row type="flex" justify="end" class="footerBtns">
          <el-button type="primary" @click="formMethod.submit">确 定</el-button>
          <el-button type="danger" v-if="formData.id != ''" @click="deletInfo">删 除</el-button>

        </el-row>
      </el-form>

只有校验代码：

//校验普通电话、号码：可以“+”开头，除数字外，可含有“-”  
const reg = /^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/
const validatePass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入内容'));
  }else {
    if(!reg.test(value)){
      callback(new Error("请输入正确号码"));
    }else{
      callback();
    }
  }
}; 

// 传真号码
const faxReg = /^(\d{3,4}-)?\d{7,8}$/
const faxValidatePass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入内容'));
  }else {
    if(!faxReg.test(value)){
      callback(new Error("请输入正确传真"));
    }else{
      callback();
    }
  }
}; 

// 邮箱
const emailReg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/
const emailValidatePass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入邮箱'));
  }else {
    if(!emailReg.test(value)){
      callback(new Error("请输入正确邮箱"));
    }else{
      callback();
    }
  }
};

// 邮编
const codeReg = /^\d{6}$/
const codeValidatePass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入邮编'));
  }else {
    if(!codeReg.test(value)){
      callback(new Error("请输入正确邮编"));
    }else{
      callback();
    }
  }
};


rules: {
  company: [{ required: true, message: "请输入公司名称", trigger: "change" }],
   website:[
     { required: true, message: "请输入网址", trigger: "blur" },
     {
       pattern:/^((http|https):\/\/)?(([A-Za-z0-9]+-[A-Za-z0-9]+|[A-Za-z0-9]+)\.)+([A-Za-z]+)[/?:]?.*$/,
       message: "输入以http或https开头的url地址",
       trigger: "blur",
     },
   ],
   marketPhone: [{ required: true, validator: validatePass, trigger: "blur" }],//市场部电话
   techniquePhone: [{ required: true, validator: validatePass, trigger: "blur" }],//技术部电话
   productPhone: [{ required: true, validator: validatePass, trigger: "blur" }],//产品部电话
   complaintPhone: [{ required: true, validator: validatePass, trigger: "blur" }],//投诉与建议电话
   email: [{ required: true, validator: emailValidatePass, trigger: "blur" }],//邮箱
   phone: [{ required: true, validator: faxValidatePass, trigger: "blur" }],//传真
   address: [{ required: true, message: "请输入公司名称", trigger: "change" }],
   zipCode: [{ required: true, validator: codeValidatePass, trigger: "blur" }],//邮编
   plat: [{ required: true, message: "请上传图片", trigger: "blur" }],
 },

样式控制显示一张后，添加按钮隐藏

:deep(.disabled .el-upload--picture-card ){
    display: none;
  }