在vue项目开发中,会遇到不少表单验证问题,如果表单选项少我们大多是手写判定不为空,
if (this.form.gzfzrxm == undefined || this.form.gzfzrxm == null) {
this.$message.warning("工作负责人不能为空");
return;
}
那如果表单选项比较多时,我们就可以组件化表单验证,利用validate可以满足需求,实现快速开发;
rules: {
managePerson:[
{
required: true,
message: "管理责任人不能为空",
trigger: "blur",
},
],
executorPerson:[
{
required: true,
message: "执行责任人不能为空",
trigger: "blur",
},
],
zyjhmc:[
{
required: true,
message: "工作任务不能为空",
trigger: "blur",
},
],
// zyjhDw:[
// {
// required: true,
// message: "地市局不能为空",
// trigger: "change",
// },
// ],
supervisionUnit: [
{
required: true,
message: "督察单位不能为空",
trigger: "change",
},
],
problemSubsidiary: [
{
required: true,
message: "分子公司不能为空",
trigger: "blur",
},
],
checkedBy:[
{
required: true,
message: "检查人不能为空",
trigger: "blur",
}
],
workBm: [
{
required: true,
message: "项目管理单位不能为空",
trigger: "blur",
},
],
// threeQualifications: [
// {
// required: true,
// message: "三种人不能为空",
// trigger: "change",
// },
// ],
idNumber: [
{
pattern:
/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
message: "请输入正确的身份证号",
trigger: "blur",
},
],
// age: [
// {
// required: true,
// message: "年龄不能为空",
// trigger: "blur",
// },
// ],
supervisionAddress: [
{
required: true,
message: "督察地点不能为空",
trigger: "blur",
},
],
violationDescription: [
{
required: true,
message: "问题描述不能为空",
trigger: "blur",
},
],
// partyMember: [
// {
// required: true,
// message: "是否党员不能为空",
// trigger: "change",
// },
// ],
supervisionMode: [
{
required: true,
message: "督察形式不能为空",
trigger: "change",
},
],
zyjhZt: [
{
required: true,
message: "工作主体不能为空",
trigger: "change",
},
],
zyjhDw: [
{
required: true,
message: "地市局不能为空",
trigger: "change",
},
],
zyjhCategory: [
{
required: true,
message: "作业类别不能为空",
trigger: "change",
},
],
problemType: [
{
required: true,
message: "违问题类型不能为空",
trigger: "change",
},
],
zyjhType: [
{
required: true,
message: "专业类型不能为空",
trigger: "change",
},
],
operationMode: [
{
required: true,
message: "工作方式不能为空",
trigger: "change",
},
],
zhfxpgdj: [
{
required: true,
message: "作业风险等级不能为空",
trigger: "change",
},
],
systemClassification: [
{
required: true,
message: "体系分类不能为空",
trigger: "change",
},
],
supervisionLevel: [
{
required: true,
message: "督察层面级不能为空",
trigger: "change",
},
],
wtfssj: [
{
required: true,
message: "问题发生时间不能为空",
trigger: "blur",
},
],
wtms: [
{
required: true,
message: "违章主要管理原因分析不能为空",
trigger: "blur",
},
],
wzrydw: [
{
required: true,
message: "当事人单位不能为空",
trigger: "blur",
},
],
wzryxm: [
{
required: true,
message: "当事人不能为空",
trigger: "blur",
},
],
wzqrr: [
{
required: true,
message: "发现人不能为空",
trigger: "blur",
},
],
// wzjcr: [
// {
// required: true,
// message: "记录人不能为空",
// trigger: "blur",
// },
// ],
// zgzrrId: [
// {
// required: true,
// message: "整改责任人不能为空",
// trigger: "blur",
// },
// ],
zgjy: [
{
required: true,
message: "整改建议不能为空",
trigger: "blur",
},
],
// zgqx: [
// {
// required: true,
// message: "整改期限不能为空",
// trigger: "blur",
// },
// ],
zgcs: [
{
required: true,
message: "整改措施不能为空",
trigger: "blur",
},
],
remark: [
{
required: true,
message: "备注不能为空",
trigger: "blur",
},
],
status: [
{
required: true,
message: "当前状态不能为空",
trigger: "blur",
},
],
sort: [
{
required: true,
message: "排序号不能为空",
trigger: "blur",
},
],
createBy: [
{
required: true,
message: "创建者不能为空",
trigger: "blur",
},
],
createTime: [
{
required: true,
message: "创建时间不能为空",
trigger: "blur",
},
],
updateBy: [
{
required: true,
message: "更新者不能为空",
trigger: "blur",
},
],
updateTime: [
{
required: true,
message: "更新时间不能为空",
trigger: "blur",
},
],
delFlag: [
{
required: true,
message: "逻辑删除不能为空",
trigger: "blur",
},
],
},
在表头加入
<el-form
:class="{ border: unonber, 'red-sta': unonber }"
ref="form"
:model="form"
//加入rules
:rules="rules"
label-width="120px"
>
在提交前写入以下判断:
this.$refs["form"].validate((valid) => {
if (valid) {
//form表单不为空,valid为真
this.innerVisible=true
}
});