el-form-item表验证如何加正则

小白都可直接拿来 c v 使用的表单验证

         <el-form-item label="经营地址" prop="deptAddress" class="label">
           <el-input v-model="form.deptAddress"></el-input>
         </el-form-item>

         <el-form-item
           label="社会信用统一编码"
           prop="creditCode"
           class="label"
         >
           <el-input v-model="form.creditCode"></el-input>
         </el-form-item>

         <el-form-item label="企业固话" prop="fixedPhone" class="label">
           <el-input
             placeholder="区号—号码"
             v-model="form.fixedPhone"
           ></el-input>
         </el-form-item>
       </div>
       <el-form-item prop="protocol" class="label">
         <el-checkbox v-model="form.protocol"
           >本人已认真阅读且同意遵守<a href="#"
             >《平台协议》</a
           ></el-checkbox
         >
       </el-form-item>
       <el-form-item>
         <el-button
           type="primary"
           native-type="submit"
           @click.prevent="submitForm('form')"
           >提交</el-button
         >
       </el-form-item>
     </el-form>
   </div>
 </div>

js部分 封装的api入口

<script>
import { toPlus } from '@/api/lessApi'//封装的api
export default {
  data() {
    var credit = (rule, value, callback) => {
    var creditNum =
/^([0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]\d{14})$/
      if (!value) {
        return callback(new Error('请输入社会信用统一编码'))
      }else if (!creditNum.test(value)) {
        callback(new Error('社会信用统一编码格式错误'))
      }
      callback();//没有这个回调 验证完成后，无法执行
    }
   var fixed = (rule, value, callback) => {
      var fixedNum = /0\d{2,3}-[1-9]\d{6,7}$/
      if (!value) {
        return callback(new Error('请输入固定电话号'))
      }else if (!fixedNum.test(value)) {
        callback(new Error('固定电话格式错误'))
      }
        callback();
      }
      var proto = (rule, value, callback) => {
        if (value === '' || value == false) {
           callback(new Error('请勾选《平台协议》'))
        }else{
         callback();
        }
    }
    return {
      form: {
        deptType: '',
        deptName: '',
        deptAddress: '',
        creditCode: '',
        fixedPhone: '',
        protocol: true,
      },
      rules: {
        deptType: [
          { required: true, message: '请选择单位类型', trigger: 'blur' },
        ],
        deptName: [
          { required: true, message: '请输入单位名称', trigger: 'blur' },
          { min: 5, max: 9, message: '长度在5到9个字符', trigger: 'blur' }
        ],
        deptAddress: [
          { required: true, message: '请输入单位地址', trigger: 'blur' },
        ],
    //以上都是不加正则直接使用的，有需要用到正则的用下面这种方式
        fixedPhone: [{ validator: fixed, trigger: 'blur' }],
        protocol: [{ validator: proto, trigger: 'change' }],
        creditCode: [{ required: true, validator: credit, trigger: 'blur' }],
        
   //验证用到正则条件的，不分开写 也写 rules 里面如下：
        creditCode: [{ required: true, message: "请输入统一社会信用编码", trigger: "blur" },
            {
              required: true,
              message: "统一社会信用编码格式错误",
              pattern: /^([0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]\d{14})$/,
              trigger: "blur"
            }],
      },
    }
  },
  
 
            
            
  methods: {
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
                if (valid) {
                  let params = { ...this.form }
                toPlus(params).then((res) => {
                  if(res.code == 1){}else {
                      this.$message.error(`${res.msg}`);
                    }
                })
             }
         })
    },
</script>