美文网首页前端
element-ui表单验证不提供message参数如何实现提示

element-ui表单验证不提供message参数如何实现提示

作者: 路尔轩 | 来源:发表于2022-02-12 10:28 被阅读0次

把校验规则写在computed里面
···
computed: {
rules () {
var validateSurnmae = (rule, value, callback) => {
let reg = /^[A-Za-z]+/ if (!reg.test(value)) { callback(new Error(this.t('joinUs.surnameErr3')))
} else {
callback()
}
};
var validateGivenName = (rule, value, callback) => {
let reg = /^[\u4e00-\u9fa5]+/ if (!reg.test(value)) { callback(new Error(this.t('joinUs.givenNameErr3')))
} else {
callback()
}
};return {
surname: [
{ required: true, message: this.t('joinUs.surnameErr1'), trigger: "blur" }, { validator: validateSurnmae, trigger: "blur" }, { min: 1, max: 20, message: this.t('joinUs.surnameErr2'), trigger: "blur" }
],
givenName: [
{ required: true, message: this.t('joinUs.givenNameErr1'), trigger: "blur" }, { validator: validateGivenName, trigger: "blur" }, { min: 1, max: 20, message: this.t('joinUs.givenNameErr2'), trigger: "blur" }
]
email: [
{ required: true, message: this.t('joinUs.emailError'), trigger: "blur" }, { type: "email", message: this.t('joinUs.emailError'),
trigger: ["blur", "change"]
}
],
phoneNumber: [
{ required: true, message: this.t('joinUs.phoneNumberError1'), trigger: "blur" }, { type: 'number', message: this.t('joinUs.phoneNumberError2'), trigger: "blur" }
]
}
}
}
···

相关文章

网友评论

    本文标题:element-ui表单验证不提供message参数如何实现提示

    本文链接:https://www.haomeiwen.com/subject/vbetlrtx.html