Vue element ui el-form 需要添加一个手机号码校验，记录一下，
参考地址

代码

<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="手机号" prop="phone">
    <el-input type="text" v-model="ruleForm.phone"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>

data(){
	//3.配置自定义规则
    const validatePhone = (rule, value, callback) => {
      // 使用正则表达式进行验证手机号码
      if (!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(value)) {
        callback(new Error('手机号不正确！'))
      } else {
        callback()
      }
    }
    return {
      rules: {
       //2.自定义验证规则
        phone: [
          { validator: validatePhone, trigger: 'blur' }
        ],
      },
      //1.表单数据
      ruleForm: {
        phone: ''
      }
    }
  },

使用代码

/**
* @Author: 858834013@qq.com
* @Name: vform
* @Date: 2022-05-30
* @Desc: 表单验证 vfor
*/
<template>
  <div class="elForm">
    <el-form v-if="show" :model="applyForm" :rules="rules" ref="ruleForm" label-position="top" label-width="80px">
      <el-form-item :label="item.fieldName" prop="value">
        <!--            没有枚举值-->
        <el-input v-if="item.isEnumeration==0" placeholder="请输入" v-model="applyForm.value"></el-input>
        <!--            有枚举值 下拉选择-->
        <el-select class="w100x" v-model="applyForm.value" :multiple="item.isMulti?true:false"
                   v-if="item.isEnumeration==1"
                   placeholder="请选择">
          <el-option
            v-for="items in enumerationValue"
            :key="items"
            :label="items"
            :value="items">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

export default {
  name: "vform",
  components: {},
  props: {
    item: {
      type: Object,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      show: false,
      enumerationValue: [],
      rules: {
        value: []
      },
      applyForm: {
        value: ''
      }
    }
  },
  watch: {
    item: {
      handler(newVal) {
        this.getdata()
      },
      deep: true
    },
  },
  mounted() {
    this.getdata()
  },
  methods: {
    submitForm(formName) {
      var that = this;
      var data = false
      that.$refs[formName].validate((valid) => {
        if (valid) {
          data = true
        } else {
          console.log('error submit!!');
          data = false
        }
      });
      return data
    },
    getFormData() {
      return this.applyForm.value
    },
    getdata() {
      var that = this;
      that.show = false
      // 如果有枚举值
      if (that.item.enumerationValue) {
        that.enumerationValue = that.item.enumerationValue.split(",")
      }
      // 校验规则
      that.rules.value = []
      // 必填校验
      if (that.item.isMust && !that.item.isEnumeration) {
        var rule = {required: true, message: '请输入' + that.item.fieldName}
        that.rules.value.push(rule)
      }
      // 手机号校验
      if (that.item.fieldName.includes('手机')) {
        //3.配置自定义规则
        let validatePhone = (rule, value, callback) => {
          /*console.log(rule);
          console.log(value);
          console.log(callback);*/
          if (!value) {
            callback(new Error('手机号不能为空！'));
          }else {
              callback()
            }
          //使用正则表达式进行验证手机号码
          if (!/^1[3456789]\d{9}$/.test(value)) {
            callback(new Error('手机号不正确！'));
          }else {
              callback()
            }
        };
        var rule = {validator: validatePhone, trigger: 'blur'}
        that.rules.value.push(rule)
      }

      if (!that.item.isEnumeration) {
        // 长度校验
        if ((that.item.minCharacterCount == 0 || that.item.minCharacterCount) && that.item.maxCharacterCount) {
          var rule = {
            min: that.item.minCharacterCount,
            max: that.item.maxCharacterCount,
            message: '长度在 ' + that.item.minCharacterCount + ' 到 ' + that.item.maxCharacterCount + ' 个字符',
            trigger: 'blur'
          }
          that.rules.value.push(rule)
        }
        if ((that.item.minCharacterCount == 0 || that.item.minCharacterCount) && !that.item.maxCharacterCount) {
          var rule = {
            min: that.item.minCharacterCount,
            message: '长度不能小于 ' + that.item.minCharacterCount + ' 个字符',
            trigger: 'blur'
          }
          that.rules.value.push(rule)
        }
        if (!that.item.minCharacterCount && that.item.maxCharacterCount) {
          var rule = {
            min: that.item.maxCharacterCount,
            message: '长度不能大于 ' + that.item.maxCharacterCount + ' 个字符',
            trigger: 'blur'
          }
          that.rules.value.push(rule)
        }
      }
      that.$nextTick(() => {
        that.show = true
      })
    }
  }
}
</script>

<style lang="scss" scoped>


.elForm {
  width: 100%;

  .el-form-item {
    width: calc(100% - 60px);
    margin-right: 60px;
  }
}
</style>