el vue 手机号_Vue 正则表达式验证邮箱和手机号码

el-form绑定:rules="addFormRules"；

el-form-item绑定prop="name"

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

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('请输入合法的邮箱'))

};

}

}

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()

},

}