Vue 正则表达式验证邮箱和手机号码

1. el-form绑定:rules="addFormRules"；
   el-form-item绑定prop="name"

2.正则表达式验证邮箱和手机号码

<script>
  export default {
    data() {
        var checkMobile = (rule, value, cb) => {
            const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
            if (regMobile.test(value)) {
                // 合法的手机号码
                return cb() 
            }
            cb(new Error('手机号码格式不正确'))
        };
        var checkEmail = (rule, value, cb) => {
            const regEmail = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
            if (regEmail.test(value)) {
                // 合法的邮箱
                return cb() 
            }
            cb(new Error('请输入合法的邮箱'))
        };
    }
  }
</script>

3.addFormRules

4.添加前的表单预校验

methods: {
    // 添加按钮
    addMember() {
      this.dialogFormVisible = true;
      this.addForm = {
        name: "",
        mobile: "",
        account: "",
        pwd: "",
        sex: "",
        email: "",
        roleIds: [],
        orgIds: "",
      }
    },
    // 确定按钮
    confirmAddMember() {
        // 添加前的表单预校验
        this.$refs.addFormRef.validate(valid => {
            if (!valid) return
        })
        // 发起数据请求（此处省略......）
        // 隐藏对话框
        this.dialogFormVisible = false;
        // 重新获取列表
        this.getFoodTable()
    },
  }