VUE element-ui之form表单自定义验证11位手机号码（封装验证规则）

步骤：

封装验证规则：

export function isvalidPhone(phone) {
  const reg = /^1([38][0-9]|4[014-9]|[59][0-35-9]|6[2567]|7[0-8])\d{8}$/
  return reg.test(phone)
}

表单中定义验证：

        <el-dialog title="新增用户" :visible.sync="dialogFormVisible">
          <el-form ref="ruleForm" :inline="true" :model="form" :rules="rules" size="small">
            <el-form-item label="电话" prop="phone">
              <el-input v-model.number="form.phone" />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
          <el-button size="mini" @click="dialogFormVisible = false">取 消</el-button>
          <el-button size="mini" type="primary" @click="submitForm('ruleForm')">确 定</el-button>
        </div>
      </el-dialog>

组件中引入封装好的验证规则：

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

自定义验证：

data() {
    // 自定义验证
    const validPhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入电话号码'))
      } else if (!isvalidPhone(value)) { //判断用户输入的值是否符合规则
        callback(new Error('请输入正确的11位手机号码'))
      } else {
        callback()
      }
    }
    return {
        dialogFormVisible: false,
        form: {
            phone: null
        },
         rules: {
            phone: [
              { required: true, trigger: 'blur', validator: validPhone } //写入验证器
            ]
      }
    }
}

点击按钮进行校验：

methods: {
    // 表单验证
    submitForm(formName) {
      this.$refs[formName].validate((valid) => { //重点是ref绑定必须一致
        if (valid) {
          alert('submit!')
          this.dialogFormVisible = false
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
}

看效果：
电话号码为空时

电话号码格式错误时

后续会一直更新各种常见验证，关注一下了解更多。