前期准备:在项目下创建一个工具包文件夹util,文件夹下创建一个formValidation.js文件
1、formValidation.js 文件
let tel = /^1(3|4|5|7|8|9)\d{9}$/; //手机号码
let name = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,10}$/; //姓名
let FormValidate = (function() {
function FormValidate() {}
FormValidate.Form = function() { // From表单验证规则,可用于公用的校验部分
return {
// 电话号码的验证
Tel: (rule, value, callback) => {
if (!value) {
return callback(new Error('联系电话不能为空!'))
}
if (!tel.test(value)) {
callback(new Error('手机号码有误,请重新填写!'))
} else {
callback()
}
},
}
}
// FromOne表单验证规则 用于FromOne个性化的校验
FormValidate.FormOne = function() {
return {
// 姓名的验证规则
Name: function(rule, value, callback) {
if (!value) {
return callback(new Error('姓名不能为空'))
}
if (!name.test(value)) {
callback(new Error('请输入正确姓名!'))
} else {
callback()
}
}
}
}
return FormValidate
}())
exports.FormValidate = FormValidate
return FormValidate
}())
exports.FormValidate = FormValidate
2、在src下的 main.js 入口文件注册全局组件
import fromCommon from "../util/fromCommon.js" // 1、导入文件
Vue.prototype.$fromCommon = fromCommon; // 2、注册成全局验证
3、使用
addRules: {
tgeiContactPhone: [{
required: true,
validator: this.$fromCommon.FormValidate.Form().Tel,
trigger: 'blur'
}],
}