关于form表单校验问题，prop绑定的的名字必须和v-model绑定的名字一致
作者：互联网
校验规则写在vue中的data函数里的return中
自定义校验规则写到data函数内return外面
data() {
// 校验手机号
var validtelephone = (rule,value,callback)=>{
let reg = /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(16[0-9])|(17[013678])|(18[0,5-9]))\d{8}$/;
if(reg.test(value)){
callback()
}else{
callback(new Error(this.$t('account.telephoneNotRight')))
}
}
//校验身份证号
var valididNo = (rule,value,callback)=>{
let reg =
/^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
if(reg.test(value)){
callback()
}else{
callback(new Error(this.$t('account.idNoNotRight')))
}
}
//校验邮箱
var validEmail = (rule,value,callback)=>{
let reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
if(reg.test(value)){
callback()
}else{
callback(new Error(this.$t('account.emailNotRight')))
}
}
return{
rules: {
userId: [{ required: true, message: this.$t('account.userIdCannotBeNull'), trigger: 'blur' }],
userName: [{ required: true, message: this.$t('account.userNameCannotBeNull'), trigger: 'blur' }],
password: [{ required: true, message: this.$t('account.passwordCannotBeNull') }, { validator: validPwd, trigger: 'blur' }],
re_password: [{ required: true, message: this.$t('account.rePasswordCannotBeNull') }, { validator: validRePwd, trigger: 'blur' }],
maxSessionNumber: [{ required: true, message: '最大会话数不为空', trigger: 'blur' }],
email:[{required:true,message: this.$t('account.emailCannotBeNull'), trigger: 'blur'},{ validator: validEmail, trigger: 'blur' }],
idNo:[{required:true,message: this.$t('account.telephoneCannotBeNull'), trigger: 'blur'},{ validator: valididNo, trigger: 'blur' }],
mobile:[{required:true,message: this.$t('account.telephoneCannotBeNull')},{ validator: validtelephone, trigger: 'blur' }],
qq:[{max: 10, message: 'QQ最长10位', trigger: 'blur' }]
},
}
标签：account,required,form,绑定,callback,名字,trigger,blur,message 来源： https://www.cnblogs.com/harryzong/p/15870854.html