Vue基于Element表单校验自定义正则表达式

在/utils/validate.js 文件中放入需要的正则

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 { isMobile } from '@/utils/validate'

基于Element表单校验，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。

<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
          }
        }
      )
    }
  }
},