Element UI表单验证：input框填写数据后仍提示不能为空的解决方法

\u003ctemplate\u003e\n \u003cel-dialog\n :visible.sync\u003d"dialogVisible"\n @closed\u003d"afterClose"\n :width\u003d"width"\n :height\u003d"height"\n destroy-on-close\n \u003e\n \u003c!-- \u003cel-card :visible.sync\u003d"dialogVisible" class\u003d"app-container" --\u003e\n \u003cCommonHeader slot\u003d"title" headerTitle\u003d"对标指标详情" /\u003e\n \u003cel-divider\u003e\u003c/el-divider\u003e\n {{ formData }}\n \u003cel-form\n ref\u003d"indicatorRespectForm"\n :v-model\u003d"formData"\n label-width\u003d"30%"\n :rules\u003d"rules"\n size\u003d"small"\n \u003e\n \u003cel-row justify\u003d"space-around"\u003e\n \u003cel-col :span\u003d"8"\u003e\n \u003cel-form-item label\u003d"指标代码" prop\u003d"logtIndexTargetCode"\u003e\n \u003cel-input\n v-model\u003d"formData.logtIndexTargetCode"\n :disabled\u003d"disabledEdit"\n class\u003d"width-90"\n maxlength\u003d"100"\n \u003e\u003c/el-input\u003e\n \u003cel-form-item\u003e\n \u003cel-col\u003e\n\n\n \u003cel-row\u003e\n\n \u003cel-form\u003e\n \u003cCommonFooter\n v-if\u003d"isAdd"\n slot\u003d"footer"\n :hasOkButton\u003d"true"\n okText\u003d"保存"\n cancelText\u003d"关闭"\n @onOk\u003d"saveInfo"\n @onCancel\u003d"afterClose"\n \u003e\n \u003c/CommonFooter\u003e\n \u003cel-row v-else type\u003d"flex" justify\u003d"end"\u003e\n \u003cel-button-group\u003e\n \u003cel-button\n v-if\u003d"disabledEdit"\n icon\u003d"el-icon-edit"\n type\u003d"primary"\n @click\u003d"showEdit"\n \u003e修改\u003c/el-button\u003e\n \u003cel-button\n v-if\u003d"!disabledEdit"\n icon\u003d"el-icon-check"\n type\u003d"primary"\n @click\u003d"saveInfo"\n \u003e保存\u003c/el-button\u003e\n \u003cel-button\n icon\u003d"el-icon-close"\n @click\u003d"afterClose"\n style\u003d"margin-left: 10px"\n \u003e关闭\u003c/el-button\u003e\n \u003cel-button-group\u003e\n \u003cel-row\u003e\n \u003cel-dialog\u003e\n \u003c!-- \u003cel-card\u003e --\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport CostProjectTreeDialog from "./costProjectTree/costProjectTreeDialog.vue";\nimport {\n addCostProjectInfo,\n updateCostProjectInfo,\n queryCostProjectTree,\n queryCostProjectInfo,\n} from "\u0040/api/national/lom/csts";\nimport Treeselect from "@riophae/vue-treeselect";\n\nimport "@riophae/vue-treeselect/dist/vue-treeselect.css";\n\nimport {\n queryLogtIndexIndexServiceList,\n addLogtIndexIndexService,\n updateLogtIndexIndexService,\n deleteLogtIndexIndexService,\n quweyLogtIndexIndexServiceTree,\n} from "\u0040/api/national/lom/benchmarking";\n\nexport default {\n name: "IndicatorRespectDetail",\n components: {\n CostProjectTreeDialog,\n Treeselect,\n },\n props: {\n width: {\n type: String,\n default: "900px",\n },\n height: {\n type: String,\n default: "1024px",\n },\n },\n created() {\n },\n data() {\n return {\n logtIndexItemIsFoundationOptions: [\n { label: "是", value: true },\n { label: "否", value: false },\n ],\n logtIndexItemQueryOptions: [\n { label: "成本类", value: "1" },\n { label: "能耗类", value: "2" },\n { label: "仓储类", value: "3" },\n { label: "分捡类", value: "4" },\n { label: "送货类", value: "5" },\n { label: "服务类", value: "6" },\n { label: "其他", value: "7" },\n ],\n logtIndexItemBenchmarkOptions: [\n { label: "服务类", value: "1" },\n { label: "质量类", value: "2" },\n { label: "安全类", value: "3" },\n { label: "资源配置类", value: "4" },\n { label: "费用类", value: "5" },\n { label: "效能", value: "6" },\n ],\n logtIndexItemGroupOptions: [\n { label: "达标类", value: "1" },\n { label: "竞赛类", value: "2" },\n ],\n logtIndexItemRaceOptions: [\n { label: "是", value: "1" },\n { label: "否", value: "2" },\n ],\n logtIndexIndexEnableStatusOptions: [\n { label: "在用", value: "1" },\n { label: "停用", value: "2" },\n ],\n // modal显示开关\n dialogVisible: false,\n // 页面信息\n formData: {\n // zaEnableStatus: 1,\n // md03CgtLogtCostItemLevel: null,\n // cgtLogtIsLeaf: "1",\n logtIndexTargetCode: "",\n logtIndexTargetName: "",\n logtIndexItemQuery: "",\n logtIndexItemBenchmark: "",\n logtIndexItemGroup: "",\n logtIndexItemRace: "",\n logtIndexItemIsFoundation: "",\n logtIndexTargetDesc: "",\n logtIndexTargetLogic: "",\n },\n disabledEdit: true,\n hasOkButton: true,\n validate: true,\n rules: {\n logtIndexTargetCode: [\n { required: true, message: "指标代码不能为空", trigger: "blur" },\n // {\n // min: 2,\n // max: 100,\n // message: "指标代码长度必须介于 2 和 100 之间",\n // trigger: "blur",\n // },\n ],\n // logtIndexTargetName: [\n // { required: true, message: "指标名称不能为空", trigger: "blur" },\n // {\n // min: 2,\n // max: 200,\n // message: "指标名称长度必须介于 2 和 200 之间",\n // trigger: "blur",\n // },\n // ],\n // logtIndexItemQuery: [\n // {\n // required: true,\n // message: "基础查询分类不能为空",\n // trigger: "change",\n // },\n // ],\n // logtIndexItemBenchmark: [\n // {\n // required: true,\n // message: "物流对标分类不能为空",\n // trigger: "change",\n // },\n // ],\n // logtIndexItemGroup: [\n // {\n // required: true,\n // message: "分组分类对标分类不能为空",\n // trigger: "change",\n // },\n // ],\n // logtIndexItemRace: [\n // {\n // required: true,\n // message: "达标竞赛分类不能为空",\n // trigger: "change",\n // },\n // ],\n // logtIndexItemIsFoundation: [\n // {\n // required: true,\n // message: "是否基础指标不能为空",\n // trigger: "change",\n // },\n // ],\n // logtIndexTargetDesc: [\n // {\n // required: true,\n // message: "说明/计算公式不能为空",\n // trigger: "change",\n // },\n // {\n // min: 2,\n // max: 1000,\n // message: "说明/计算公式长度必须介于 2 和 1000 之间",\n // trigger: "blur",\n // },\n // ],\n // logtIndexTargetLogic: [\n // { required: true, message: "计算逻辑不能为空", trigger: "blur" },\n // {\n // min: 2,\n // max: 2000,\n // message: "计算逻辑长度必须介于 2 和 2000 之间",\n // trigger: "blur",\n // },\n // ],\n // logtIndexIndexEnableStatus: [\n // { required: true, message: "状态不能为空", trigger: "blur" },\n // ],\n },\n isAdd: false,\n treeOptions: [],\n };\n },\n watch: {\n },\n methods: {\n afterClose() {\n this.dialogVisible = false;\n this.validate = true;\n (this.disabledEdit = true),\n (this.dataList = []),\n // 清空表单值(会触发表单验证,需要移除验证)\n this.emptyFormDataValue().then(() => {\n this.$refs.costProjectForm.clearValidate();\n });\n },\n\n // 清空formData数据\n emptyFormDataValue() {\n let formDataTemp = this.formData;\n // 遍历formdata,保留属性,但将值设为null\n return new Promise(function (resolve, reject) {\n for (let prop in formDataTemp) {\n formDataTemp[prop] = "";\n }\n resolve();\n });\n },\n //设置是否可编辑，设置数据\n setDataModel(isView, dataList) {\n this.dialogVisible = true;\n this.disabledEdit = isView;\n if (dataList) {\n this.formData = dataList;\n this.isAdd = false;\n } else {\n // this.formData = {\n // zaEnableStatus: 1,\n // md03CgtLogtCostItemLevel: null,\n // cgtLogtLongCode: "",\n // cgtLogtLongName: "",\n // cgtLogtIsLeaf: "1",\n // };\n this.isAdd = true;\n }\n },\n showEdit() {\n this.disabledEdit = false;\n },\n saveInfo() {\n if (this.isAdd) {\n this.addNewInfo();\n } else {\n this.updateInfo();\n }\n },\n\n addNewInfo() {\n // this.$refs.indicatorRespectForm.validate((valid) => {\n // console.log(valid);\n // if (valid) {\n // alert("submit!");\n // } else {\n // console.log("error submit!!");\n // return false;\n // }\n // });\n\n let validate = this.checkFormRules("indicatorRespectForm");\n console.log('查看验证结果',validate)\n debugger;\n if (validate) {\n console.log(validate);\n //处理长编码和长名称\n // this.formData.cgtLogtLongCode = this.formData.cgtLogtLongCode\n // ? this.formData.cgtLogtLongCode +\n // "!" +\n // this.formData.md03CgtLogtCostTargetCode\n // : this.formData.md03CgtLogtCostTargetCode;\n // this.formData.cgtLogtLongName = this.formData.cgtLogtLongName\n // ? this.formData.cgtLogtLongName +\n // "!" +\n // this.formData.md03CgtLogtCostTargetName\n // : this.formData.md03CgtLogtCostTargetName;\n\n console.log(this.formData);\n debugger;\n addLogtIndexIndexService(this.formData).then((res) => {\n if (res.code === 200) {\n this.afterClose();\n // this.$modal.msgSuccess("保存成功!");\n this.$emit("searchClick");\n this.afterClose();\n // this.searchClick(this.searchData);\n } else {\n this.$modal.msgError(response.message);\n }\n });\n }\n },\n\n updateInfo() {\n let validate = this.checkFormRules("costProjectForm");\n if (validate) {\n updateCostProjectInfo(this.formData).then((res) => {\n if (res.code === 200) {\n this.afterClose();\n this.$modal.msgSuccess("修改成功!");\n // this.searchClick(this.searchData);\n this.$emit("searchClick");\n\n // this.searchClick(th\n } else {\n this.$modal.msgError(response.message);\n }\n });\n } else {\n this.$modal.msgWarning("修改时校验失败！");\n }\n },\n //如果是i新增初始化数据，或者选择之后重新处理数据\n initParentData(treeInfo) {\n if (treeInfo) {\n console.log("tree", treeInfo);\n this.formData.md03CgtLogtCostItemLevel =\n treeInfo.md03CgtLogtCostItemLevel\n ? treeInfo.md03CgtLogtCostItemLevel + 1\n : 1;\n this.formData.cgtLogtLongCode = treeInfo.cgtLogtLongCode;\n this.formData.cgtLogtLongName = treeInfo.cgtLogtLongName;\n // this.formData.cgtLogtIsLeaf = "1",\n }\n },\n //初始化上级选择数据\n initTreeOptions() {\n queryCostProjectTree().then((res) => {\n if (res === 200) {\n this.treeOptions = res.data;\n }\n });\n },\n },\n\n computed: {\n },\n};\n\u003c/script\u003e\n\n\u003cstyle lang\u003d"scss" scoped\u003e\n.widthDesc {\n width: 770px;\n}\n.width-90 {\n width: 90%;\n}\n::v-deep .el-dialog__header {\n padding: 10px 10px 0;\n}\n::v-deep .el-dialog__headerbtn {\n top: 15px;\n}\n::v-deep .el-dialog__body {\n padding: 10px;\n}\n::v-deep .el-dialog__footer {\n padding: 10px 10px 20px 10px;\n}\n::v-deep .el-form-item__label {\n font-size: 12px;\n}\n\n::v-deep .el-divider--horizontal {\n margin: 0 0 20px 0;\n}\n\u003c/style\u003e\n\n在Element UI的表单验证中，当使用v-model绑定formData，并且配置了校验规则，但是输入框填写数据后仍然提示不能为空的问题，可能是以下几个原因导致：\n\n1. 检查formData中的属性名是否与rules中的属性名一致，大小写是否匹配。\n\n2. 检查是否在表单验证之前对formData进行了赋值操作，如果是新增操作，需要先清空formData的值再进行赋值。\n\n3. 检查是否调用了表单的验证方法，例如this.$refs.form.validate()，如果没有调用验证方法，表单验证规则不会生效。\n\n4. 检查是否在验证方法中传递了回调函数，如果有回调函数，需要在回调函数中处理验证结果。\n\n如果以上方法都没有解决问题，可以尝试在开发工具中打印输出表单验证的结果，查看具体的错误信息，以便定位问题所在。