vue&element-ui搭配使用rules表单校验规则
验证手机号&邮箱的写法
data() {
var checkPhone = (rule, value, callback) => {
const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
if (!value) {
return callback(new Error('手机号不能为空'))
}
setTimeout(() => {
// Number.isInteger是es6验证数字是否为整数的方法,但是我实际用的时候输入的数字总是识别成字符串
// 所以我就在前面加了一个+实现隐式转换
if (!Number.isInteger(+value)) {
callback(new Error('请输入数字值'))
} else {
if (phoneReg.test(value)) {
callback()
} else {
callback(new Error('手机号格式不正确'))
}
}
}, 100)
};
var checkEmail = (rule, value, callback) => {
const mailReg = /^([a-zA-Z0-9_-])[email protected]([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
if (!value) {
return callback(new Error('邮箱不能为空'))
}
setTimeout(() => {
if (mailReg.test(value)) {
callback()
} else {
callback(new Error('请输入正确的邮箱格式'))
}
}, 100)
};
return {
rules: {
sex: [{
required: true,
message: '请选择',
trigger: 'blur'
}],
telephone: [{
required: true,
message: '请输入',
trigger: 'blur'
},{
validator: checkPhone,
trigger: 'blur'
}],
userName: [{
required: true,
message: '请输入',
trigger: 'blur'
}],
email: [{
required: true,
message: '请输入',
trigger: 'blur'
},{
validator: checkEmail,
trigger: 'blur'
}],
status: [{
required: true,
message: '请选择',
trigger: 'blur'
}]
},
}
},