定义一validate.js文件内容如下:
validate.js封装部分
const rules = {
email: {
ex: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
msg: '请输入正确的email地址'
},
mobile: {
ex: /^1[0-9]{10}$/,
msg: '请输入正确的手机号'
}
....此还可添加的其他的校验方法
}
const compareFn= (rule, value, callback) => {
if (parseInt(value) > 255) {
return callback(new Error('值不可以大于5'))
} else {
callback()
}
},
....此还可添加的其他的封装方法
const Validator = {
rules,
compareFn
}
export default {
install: function(Vue, Option) {
Object.defineProperty(Vue.prototype, '$valid', { value: Validator })
}
}
xxx.vue文件使用方法:
//标签部分:
<el-form-item label="手机号:" required prop="phone">
<el-input v-model="addFormData.phone"></el-input>
</el-form-item>
<el-form-item label="邮箱:" required prop="email">
<el-input v-model="addFormData.email"></el-input>
</el-form-item>
//验证规则:
rules: {
phone: [
{ required: true, message: '请输入手机号' },
{ pattern: this.$valid.rules.mobile.ex, message: '手机号格式错误' }
],
email: [
{ required: true, message: '请输入邮箱' },
{ pattern: this.$valid.rules.email.ex, message: '邮箱格式错误' }
]
}
重点::①、标签传入校验规则;②、this.$valid.rules在规则定义里面调用具体的规则