Vue validates custom regular expressions based on Element form

Put the required regularity in the /utils/validate.js file

export function isMobile(path) {
  return /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
    .test(path)
}

import in required file

import { isMobile } from '@/utils/validate'

Based on Element form validation, you only need to  rules pass in the agreed validation rules through attributes, and  prop set the Form-Item attribute to the field name to be validated.

<el-form ref="ruleFormRef" :model="loginForm" :rules="loginRules">
  <el-form-item prop="mobile">
    <el-input v-model="loginForm.mobile"
      placeholder="请输入用户名或手机号"
    />
  </el-form-item>
  <el-button type="primary"  @click="onSubmit(ruleFormRef)">登陆</el-button>
</el-form>

export default {
  data() {
    const validateMobile= (rule, value, callback) => {
      if (isMobile(value)) {
        callback()
      } else {
        callback(new Error('手机号格式不正确'))
      }
    }
    return {
      ruleFormRef: '',
      loginForm: {
        mobile: '',
      },
      loginRules: {
        mobile: 
        [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { validator: validateMobile}
        ],
      },
    },
  methods:{
    onSubmit(formEl) {
      if (!formEl) return
        formEl.validate((valid) => {
          if (valid) {
            console.log(valid)
          } else {
            console.log(valid)
            return false
          }
        }
      )
    }
  }
},