When we write the form submission verification, because many pages need regular inspection, this leads to writing a lot of repeated code, which is very inconvenient
So all the rules can be extracted and made public files. Hanging on the prototype of Vue, the code is as follows:
Create a new formCheck.js under the utils folder
// 手机号码验证
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",
},
],
},
}
After adding the file in this way, it is divided into two main parts:
- const defines various regular inspection rules (mobile phone number, email, etc.)
- export default {common: {}, aaa: {}} The second step is to export a large object, which contains various verification rules corresponding to the page.
The second step is to mount the main.js file to the prototype
import rules from '@/utils/formCheck.js'
// 全局方法正则挂载
Vue.prototype.$rules = rules
The last step, start referencing on the page
Add el-form form tag: :rules="$rules.six"
You can also use el-form-item alone: :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>
Note: When I define variables in const, I don’t like uppercase definitions very much. The readability of the code is poor, and there is no lowercase to look comfortable...
over