Wenn wir die Überprüfung der Formularübermittlung schreiben, führt dies dazu, dass viele Seiten wiederholt überprüft werden müssen, was sehr unpraktisch ist
So können alle Regeln extrahiert und in öffentliche Dateien umgewandelt werden. Der Code hängt vom Prototyp von Vue ab und lautet wie folgt:
Erstellen Sie eine neue formCheck.js im Ordner „utils“.
// 手机号码验证
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",
},
],
},
}
Nachdem die Datei auf diese Weise hinzugefügt wurde, ist sie in zwei Hauptteile unterteilt:
- const definiert verschiedene regelmäßige Inspektionsregeln (Mobiltelefonnummer, E-Mail usw.)
- Standard exportieren {common: {}, aaa: {}} Der zweite Schritt besteht darin, ein großes Objekt zu exportieren, das verschiedene Überprüfungsregeln enthält, die der Seite entsprechen.
Der zweite Schritt besteht darin, die Datei main.js in den Prototyp einzubinden
import rules from '@/utils/formCheck.js'
// 全局方法正则挂载
Vue.prototype.$rules = rules
Der letzte Schritt besteht darin, mit der Referenzierung auf der Seite zu beginnen
El-Form-Formular-Tag hinzufügen: :rules="$rules.six"
Sie können el-form-item auch alleine verwenden: :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>
Hinweis: Wenn ich Variablen in const definiere, mag ich Großbuchstabendefinitionen nicht besonders. Die Lesbarkeit des Codes ist schlecht und es gibt keine Kleinbuchstaben, die angenehm aussehen ...
über