el-form自定义校验

提示样式

一、基本校验

rules:{

name: [

{ required: true, trigger: 'blur',  message: '请输入名称' }

]

}

二、函数校验

data() {

var existPhoneRule = (rule, value, callback) => { // 手机号唯一性校验

let regx = /^1[0-9]{10}$/;

if (!value) {

return callback(new Error('请输入手机号'));

}

if (!regx.test(value)) {

return callback(new Error('手机号格式错误'));

}

};

return {

rules:{phone: [{ validator: existPhoneRule, required: true, trigger: 'blur' }]}

}

}

三、接口返回校验

data() {

var existPhoneRule = (rule, value, callback) => { // 手机号唯一性校验

let paramas = {}

if (!value) {

return callback(new Error('请输入手机号'));

}

existPhone(paramas).then(res => {

if (res.code === '200') {

callback();

} else {

callback(new Error(res.message));

}

})};

return {

rules:{phone: [{ validator: existPhoneRule, required: true, trigger: 'blur' }]}

}

}