vue elementUI 表单验证校验

 template div div class crumbs el-breadcrumb separator / el-breadcrumb-item i class el-icon-lx-calendar /i 数据录入 /el-breadcrumb-item /el-breadcrumb /div div class container div class el-form ref formData :model formData :rules rules el-form-item required label 数据版本 prop version label-width 80px el-input v-model formData.version ref version style max-width: 215px; /el-input /el-form-item el-form-item label 重要模型 label-width 80px el-select v-model pageDataValue change selectPageType el-option v-for item in pageData :key item.value :label item.label :value item.value /el-option /el-select /el-form-item el-row :gutter 20 el-col :span 16 v-for (dataType, index) in formData.selectPageData :key index el-card shadow hover style margin-top: 10px;background-color: #F2F6FC; div style line-height: 32px;color: #606266;font-size: 16px;font-weight: 600; {{dataType.label}} /div el-form :model formData.selectPageData[index] inline ref formDataDetail el-col v-for (item1, index1) in dataType.item :key index1 div style line-height: 32px;color: #606266; {{item1.value}} /div el-col :span 12 el-form-item label 准确率 size small :prop item[ index1 ].correctRate :rules [{required: true,message: 只能输入数字 }] el-input v-model dataType.item[index1].correctRate type number οnkeypress return(/[\\d]/g.test(String.fromCharCode(event.keyCode))) /el-input /el-form-item /el-col el-col :span 12 el-form-item label 召回率 size small :prop item[ index1 ].recallRate :rules [{required: true,message: 只能输入数字 }] el-input v-model.number dataType.item[index1].recallRate /el-input /el-form-item /el-col /el-col /el-form /el-card /el-col /el-row el-form-item style margin-top: 10px; el-button type primary click addPageData( formData ) 新增数据 /el-button el-button 取消 /el-button /el-form-item /el-form /div /div /div /template script import interfaceURL from ../common/interface import utils from ../common/utils import bus from ../common/bus export default { name: dataEntry , data: function () { return { pageDataValue: pg_worth_data , pageData: [ { value: pg_worth_data , label: 页面价值 低质 , item: [ { key: cont_deadlink , value: 内容死链 , correctRate: , recallRate: }, { key: rt_deadlink , value: 跳转死链 , correctRate: , recallRate: }, { key: kw_pileup , value: 关键词堆砌 , correctRate: , recallRate: }, { key: lk_pileup , value: 链接堆砌 , correctRate: , recallRate: }, { key: sp_search , value: 空搜索页 , correctRate: , recallRate: }, { key: sp_page , value: 空页面 , correctRate: , recallRate: }, { key: qu_nonan , value: 有无问答页 , correctRate: , recallRate: }, { key: pro_non , value: 商品卖完页 , correctRate: , recallRate: }, ] }, { value: element_data , label: 元素提取/元素识别 , item: [ { key: cont , value: content , correctRate: , recallRate: }, { key: refer , value: refer , correctRate: , recallRate: }, { key: title , value: title , correctRate: , recallRate: }, { key: retitle , value: 真实标题 , correctRate: , recallRate: }, { key: pub_time , value: article-info/publish time , correctRate: , recallRate: }, { key: myops , value: myops , correctRate: , recallRate: }, { key: pg_turn , value: 翻页 , correctRate: , recallRate: }, { key: header , value: 导航 , correctRate: , recallRate: }, { key: footer , value: 版权信息 , correctRate: , recallRate: }, { key: footer , value: 其他边框 , correctRate: , recallRate: }, { key: share , value: 分享块 , correctRate: , recallRate: }, { key: video , value: 视频块 , correctRate: , recallRate: }, { key: link , value: 链接块 , correctRate: , recallRate: }, { key: comment , value: 评论块 , correctRate: , recallRate: }, ] }, { value: classify_data , label: 页面结构分类 , item: [ { key: article , value: 文章页 , correctRate: , recallRate: }, { key: news , value: 新闻内容页 , correctRate: , recallRate: }, { key: novel , value: 小说内容页 , correctRate: , recallRate: }, { key: blog , value: 博客内容页 , correctRate: , recallRate: }, { key: introduction , value: 介绍页 , correctRate: , recallRate: }, { key: index , value: 索引页 , correctRate: , recallRate: }, { key: qaanswer , value: 问答页 , correctRate: , recallRate: }, { key: baike , value: 百科页 , correctRate: , recallRate: }, { key: image , value: 图片页 , correctRate: , recallRate: }, { key: video , value: 视频页 , correctRate: , recallRate: }, { key: high_video , value: 高质量视频 , correctRate: , recallRate: }, { key: product_detail , value: 商品详情页 , correctRate: , recallRate: }, { key: download , value: 下载页 , correctRate: , recallRate: } ] }, { value: content_data , label: 正文提取 , item: [ { key: content_data , value: 正文文字提取 , correctRate: , recallRate: } ] }, { value: image_data , label: 图文提取 , item: [ { key: image_data , value: 图文提取 , correctRate: , recallRate: } ] }, { value: sugges_data , label: 搜索引擎 , item: [ { key: sugges_data , value: 搜索引擎 , correctRate: , recallRate: } ] } ], formData: { version: , selectPageData: [ { value: pg_worth_data , label: 页面价值 低质 , item: [ { key: cont_deadlink , value: 内容死链 , correctRate: , recallRate: }, { key: rt_deadlink , value: 跳转死链 , correctRate: , recallRate: }, { key: kw_pileup , value: 关键词堆砌 , correctRate: , recallRate: }, { key: lk_pileup , value: 链接堆砌 , correctRate: , recallRate: }, { key: sp_search , value: 空搜索页 , correctRate: , recallRate: }, { key: sp_page , value: 空页面 , correctRate: , recallRate: }, { key: qu_nonan , value: 有无问答页 , correctRate: , recallRate: }, { key: pro_non , value: 商品卖完页 , correctRate: , recallRate: }, ] } ], }, rules: { version: [ {required: true, message: 不能为空 } ] }, } }, methods: { addPageData(value) { this.$refs[value].validate((valid) { if (valid) { this.$refs[value].resetFields(); const lang localStorage.getItem( locale ) ? localStorage.getItem( locale ) : en let formData this.formData.selectPageData; let newForm {}; let create_time utils.timeToDateAndTime(); // 使用this.formData.version取不到绑定的值 let version this.$refs.version.value; newForm.lang lang; newForm.create_time create_time; newForm.version version; newForm.pageData JSON.parse(JSON.stringify(formData)); let url switch (this.pageDataValue) { case pg_worth_data : url interfaceURL.addPgworthData; break; case element_data : url interfaceURL.addElementData; break; case classify_data : url interfaceURL.addClassifyData; break; case content_data : url interfaceURL.addContentData; break; case image_data : url interfaceURL.addImageData; break; case sugges_data : url interfaceURL.addSuggesData; break; default: break; } this.$axios({ method: POST , url: url, data: newForm }).then(res { this.$message.success( 提交成功 // window.location.reload(); }).catch(error { this.$message({ showClose: true, message: 网络正忙 保存失败 , type: error }); }); } else { this.$message.error( 请输入数据版本信息 return false; } }); }, selectPageType(val) { this.pageDataValue val; for (let i i this.pageData.length; i ) { if (val this.pageData[i].value) { let obj JSON.parse(JSON.stringify(this.pageData[i])); this.formData.selectPageData[0] this.pageData[i]; } } console.log(this.formData.selectPageData) console.log(this.pageData) }, } } /script style input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } input[type number ] { -moz-appearance: textfield; } /style