我们在写表单提交验证的时候，由于很多页面都需要正则检验，这导致写了很多重复的代码，非常的不方便
于是可以将所有正则都提取出来，做公共文件。挂在Vue的原型上，代码如下：
在utils文件夹下新建formCheck.js
// 手机号码验证
const validatePhone = (rule, value, callback) => {
const patter = new RegExp('^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$')
if (!patter.test(value)) {
return callback(new Error('请输入正确格式的手机号！'))
} else {
callback() // 必须有此项回调，否则验证会一直不通过
}
}
// 邮箱的正则
const validateEmail = (rule, value, callback) => {
const mailbox = new RegExp('^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$')
if (!mailbox.test(value)) {
return callback(new Error('请输入正确格式的邮箱！'))
} else {
callback()
}
}
// 身份证号
const validateIdCardNo = (rule, value, callback) => {
const mailbox = new RegExp('^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}[0-9Xx]$')
if (!mailbox.test(value)) {
return callback(new Error('请输入正确格式的身份证号！'))
} else {
callback()
}
}
// 身高
const height = (rule, value, callback) => {
if (!value) {
return callback(new Error("请输入身高"));
}
const mailbox = new RegExp(/^\+?[1-9]{1}[0-9]{0,2}\d{0,0}$/)
if (!mailbox.test(value)) {
return callback(new Error('请输入1~999内整数'))
} else {
callback()
}
}
// 体重
const weight = (rule, value, callback) => {
if (!value) {
return callback(new Error("请输入体重"));
}
const mailbox = new RegExp(/^(?:0\.(?:[1-9]{1,1}|0[1-9])|[1-9]\d{0,2}(?:\.[0-9]{1,1}|\.0[1-9])?|999.9)$/)
if (!mailbox.test(value)) {
return callback(new Error('请输入0.1~999.9内整数或一位小数'))
} else {
callback()
}
}
// 驻地海拔
const checkseaLeave = (rule, value, callback) => {
if (!value) {
return callback(new Error("请输入海拔"));
}
if (Number(value) <= 4000) {
const regexp = /^-?[1-9]\d*$|^0$/;
if (!regexp.test(Number(value))) {
return callback(new Error("请输入不大于4000的整数"));
} else {
callback();
}
} else {
return callback(new Error("请输入不大于4000的整数"));
}
};
export default {
// demo 仅供参考
common: {
phone: [{
required: true,
message: '手机号不能为空'
}, {
validator: validatePhone,
trigger: 'blur'
}],
email: [{
required: true,
message: '邮箱不能为空'
},
{
validator: validateEmail,
trigger: 'blur'
}
],
idCardNo: [{
required: true,
message: '身份证号码不能为空'
},
{
validator: validateIdCardNo,
trigger: 'blur'
}
]
},
// 通用课目-有伤病人员
haveInjuries: {
birthday: [
{
required: true, message: "请输入出生日期", trigger: "blur" },
],
// 体型
height: [
{
validator: height,
required: true,
trigger: "blur",
},
],
weight: [
{
validator: weight,
required: true,
trigger: "blur",
},
],
seaLeave: [
{
validator: checkseaLeave,
required: true,
trigger: "blur",
},
],
},
//通用课目-无伤病人员
injuries: {
birthday: [
{
required: true,
message: "请输入出生日期",
trigger: "blur" },
],
// 体型
height: [
{
validator: height,
required: true,
trigger: "blur",
},
],
weight: [
{
validator: weight,
required: true,
trigger: "blur",
},
],
sealevel: [
{
validator: checkseaLeave,
required: true,
trigger: "blur",
},
],
},
}
这样新增该文件之后，分为主要两块：
- const 定义各种正则的检验规则（手机号、邮箱等等）
- export default {common：{}，aaa:{}} 第二步骤导出一个大对象，里面各种对应该页面的校验规则。
第二步，在main.js文件挂载到原型
import rules from '@/utils/formCheck.js'
// 全局方法正则挂载
Vue.prototype.$rules = rules
最后一步，开始在页面引用
el-form表单标签加： :rules="$rules.six"
也可以单独el-form-item使用：:rules="$rules.haveInjuries.weight"
<el-form
:model="ruleForm"
:rules="$rules.haveInjuries"
ref="ruleForm"
label-width="100px" >
..................................
<el-form-item label="身高：" prop="height">
<el-input v-model="ruleForm.height" placeholder="请输入" size="mini"><span slot="suffix">CM
</span></el-input>
</el-form-item>
...................................
</el-form>
注：个人在const 定义变量的时候，不太喜欢大写定义，看着代码可读性差，没有小写看着舒服…
以上 over