定義一validate.js文件內(nèi)容如下：
?文章來源：http://www.zghlxwxcb.cn/news/detail-645879.html
validate.js封裝部分
const rules = {
email: {
ex: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
msg: '請輸入正確的email地址'
},
mobile: {
ex: /^1[0-9]{10}$/,
msg: '請輸入正確的手機(jī)號'
}
....此還可添加的其他的校驗方法
}
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文件使用方法：
//標(biāo)簽部分：
<el-form-item label="手機(jī)號：" 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>
//驗證規(guī)則：
rules: {
phone: [
{ required: true, message: '請輸入手機(jī)號' },
{ pattern: this.$valid.rules.mobile.ex, message: '手機(jī)號格式錯誤' }
],
email: [
{ required: true, message: '請輸入郵箱' },
{ pattern: this.$valid.rules.email.ex, message: '郵箱格式錯誤' }
]
}重點(diǎn)：：①、標(biāo)簽傳入校驗規(guī)則；②、this.$valid.rules在規(guī)則定義里面調(diào)用具體的規(guī)則文章來源地址http://www.zghlxwxcb.cn/news/detail-645879.html
到了這里，關(guān)于vue封裝公共方法(export default install)—2的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
