2. 程式人生 > >element UI表單驗證：一個複雜迴圈表單渲染後資料修改後的部分表單項驗證

element UI表單驗證：一個複雜迴圈表單渲染後資料修改後的部分表單項驗證

阿新 • • 發佈：2018-12-12

 一、前言

普通的表單驗證參考element UI官方文件即可找到解決方案並順利進行程式碼實現，官方也給出了幾個示例，是很好的參考。不過，對於複雜的表單驗證，官方文件並沒有給出過多示例或者說明。文章中的例項就是在實際專案中遇到的一個複雜表單的驗證問題。

文章中前端程式碼基於Vue.js框架，element UI開發。表單的初始資料來自API返回的資料。返回的資料結構如下：

{
	Id:'',
	Des:'',
	MedicalPayDetail:[		// 渲染到表單中的資料
		{
			EKey:'',
			ListMedicalExadmin:
			[
				{
					ProjectName:'',
					PayMoney:'',        // 需要驗證的項
					ReducePayRate:'',   // 需要驗證的項
					……
				}
			]
		},
		{
			EKey:'',
			ListMedicalExadmin:
			[
				{
					ProjectName:'',
					PayMoney:'',		// 需要驗證的項
					ReducePayRate:'',	// 需要驗證的項
					……
				}
			]
		},
		……
	]
}

 其中，API返回的資料放到了source物件中。element UI中的表單元件要進行驗證無論什麼情況下都需要對錶單繫結model，那麼如何對錶單繫結model是第一個難點。如果使用 :model="source.MedicalPayDetail" 方式進行繫結，那麼在控制檯可以看到框架報錯了。報錯資訊的意思是：期望物件，得到的是陣列。所以按照以往的直接繫結的方式不行了，換一種繫結方式來解決繫結物件報錯問題，Vue中還有另外一種繫結model的方法——:model="{MedicalPayDetail:source.MedicalPayDetail}"。利用這種繫結方式解決了“期望物件，得到的是陣列”的錯誤。

當對錶單部分表單項進行驗證時可以在表單項中指定驗證規則而無需再表單上指定即在FormItem上指定而不是在el-form上。程式碼如下：

<template>
  <div class="medical-main">
    <div class="bh-title-yl">
      醫療稽核表
    </div>
    <el-form :disabled="disabled" :model="{MedicalPayDetail:source.MedicalPayDetail}" ref="ruleForm">
      <div v-for="(item,index) in source.MedicalPayDetail" :key="index">
        <simple-box v-if="item.EKey!=3" :title="item.EKey==1?'門診費':'住院費'" class="medical-item">
          <medical-step-first :disabled="disabled" slot="body" :title="item.EKey==1?'門診費合計':'住院費合計'" :Cost.sync="item.Cost" :EKey="item.EKey" :totalTitle="item.EKey==1?'門診扣減合計：':'住院扣減合計：'" :intpatientCount="intpatientCount" :itemIndex="index" :items="item.ListMedicalExadmin"></medical-step-first>
        </simple-box>
      </div>
      <Row class="medical-bottom-btn">
        <i-col span="24">
          <i-button :disabled="disabled" @click="createImg('ruleForm')" class="medical-bottom-btn-item" type="primary">儲存並更新費用專案</i-button>
        </i-col>
      </Row>
    </el-form>
  </div>
</template>

<script>
import Enumerable from 'linq'
import { GetCompensateMedicalExamine, AddMedicalPayDetail } from '@/apis/medicalAudit'
import { Base64FileUpload } from '@/apis/upload.js'
import medicalStepFirst from './components/medicalStepFirst'
import medcalStepSecond from './components/medcalStepSecond'
import simpleBox from '../../SimpleCase/Components/form/simpleBox'
import importModelVue from '../../../components/Common/importModel'
import html2canvas from 'html2canvas'
import { Canvas2Image } from '../../../Units/cancas2image'
import { mapGetters } from 'vuex'
let vm
export default {
  data: function () {
    vm = this
    return {
      source: {
      },
      followId: 0,
      ruleForm: {
        MedicalPayDetail: []
      }
    }
  },
  created: function () {
    this.followId = this.$route.query.followId
    GetCompensateMedicalExamine({ followId: this.followId }).then(param => {
      this.source = param
      this.source.MedicalPayDetail = Enumerable.from(this.source.MedicalPayDetail).orderBy('a=>a.EKey').toArray()
      this.ruleForm.MedicalPayDetail = this.source.MedicalPayDetail
    })
  },
  components: {
    'medical-step-first': medicalStepFirst,
    'medcal-step-second': medcalStepSecond,
    'simple-box': simpleBox,
    'import-model-vue': importModelVue
  },
  computed: {
    ...mapGetters(['get_UserId']),
    disabled: () => {
      if ((vm.source.FollowStatus < 1 || vm.source.FollowStatus === 3) && vm.permissionsVerif('MedicalExamineEidt') > -1 && vm.source.CurrentCheckId === vm.get_UserId) {
        return false
      } else {
        return true
      }
    }
  },
  watch: {
  },
  methods: {
    totalMoney: function (item) {
      if (item.EKey !== 3) {
        return Enumerable.from(item.ListMedicalExadmin).sum(function (a) {
          return parseFloat(a.PayMoney)
        })
      } else {
        return Enumerable.from(item.ListMedicalExadmin).sum(function (a) {
          return parseFloat(a.ReducePayMoney)
        })
      }
    },
    createImg: function (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let vm = this
          let shareContent = this.$el // 需要截圖的包裹的（原生的）DOM 物件
          let width = shareContent.offsetWidth // 獲取dom 寬度
          let height = shareContent.offsetHeight // 獲取dom 高度
          let canvas = document.createElement('canvas') // 建立一個canvas節點
          var scale = 1 // 定義任意放大倍數 支援小數
          canvas.width = width * scale // 定義canvas 寬度 * 縮放
          canvas.height = height * scale // 定義canvas高度 *縮放
          canvas.getContext('2d').scale(scale, scale) // 獲取context,設定scale
          let opts = {
            scale: scale, // 新增的scale 引數
            canvas: canvas, // 自定義 canvas
            // logging: true, //日誌開關，便於檢視html2canvas的內部執行流程
            width: width, // dom 原始寬度
            height: height,
            useCORS: true // 【重要】開啟跨域配置
          }
          html2canvas(shareContent, opts).then(function (canvas) {
            let context = canvas.getContext('2d')
            // 【重要】關閉抗鋸齒
            context.mozImageSmoothingEnabled = false
            context.msImageSmoothingEnabled = false
            context.imageSmoothingEnabled = false
            // 【重要】預設轉化的格式為png,也可設定為其他格式
            let img = Canvas2Image.convertToJPEG(canvas, canvas.width, canvas.height)
            Base64FileUpload({
              Base64String: img.src,
              Suffix: '.jpeg',
              ReportId: vm.followId
            }).then((respone) => {
              let url = respone.Value
              vm.saveData(url)
            })
          })
        } else {
          return false
        }
      })
    },
    saveData: function (url) {
      var that = this
      this.source.ImgUrl = url
      this.source.UserId = this.get_UserId
      AddMedicalPayDetail(that.source).then(param => {
        if (!window.opener.mvm.$refs.payDetial) {
          that.$Message.success('儲存醫療稽核表成功')
          return false
        }
        window.opener.mvm.$refs.payDetial.addMedical({
          ApprovedMoney: 0,
          Days: 0,
          IsMedicalExamination: true,
          PayItemMoney: Number(vm.NeedPayCount),
          PayItemName: '醫療費',
          PayItemNameCode: '1',
          PayItemStandard: Number(vm.NeedPayCount),
          ReduceMoney: Number(vm.NeedReduceCount),
          Remark: ''
        })
        that.$Message.success('儲存醫療稽核表成功')
      })
    }
}
</script>

 以下程式碼是元件medicalStepFirst 的程式碼。需要進行驗證的表單項需要指定prop屬性，而複雜表單中prop變得也比較複雜，medicalStepFirst元件中的表單項prop為：:prop="'MedicalPayDetail['+itemIndex+'].ListMedicalExadmin['+index+'].PayMoney'"。注意：prop的值為string，因此雙引號中又包一層單引號，因為表單項是根據初始資料進行初始化並且可以增加或減少表單項，因此表單項在陣列中的索引是不固定的，這個時候需要用到v-for指令中宣告的index來進行動態的拼出來prop。

關鍵點：prop的值需要與資料中的該項的路徑一致，否則編譯後執行時會報錯。另外，進行驗證的方法是可以解除安裝methods中的，官方文件中這類方法是解除安裝data中以const來宣告的，感覺不妥。

<template>
  <div>
    <Row class="step-first-box">
      <!-- row 1 -->
      <i-col span="4" class="step-first-item step-first-blod step-first-tit">
        核減專案
      </i-col>
      <i-col span="6" class="step-first-item step-first-blod step-first-tit">
        金額（元）
      </i-col>
      <i-col span="6" class="step-first-item step-first-blod step-first-tit">
        自費原因
      </i-col>
      <i-col span="3" class="step-first-item step-first-blod step-first-tit">
        自費比例（%）
      </i-col>
      <i-col span="3" class="step-first-item step-first-blod step-first-tit">
        自費金額（元）
      </i-col>
      <i-col span="2" class="step-first-item step-first-blod step-first-tit">
        操作
      </i-col>
      <!-- row 2 -->
      <div v-for="(item,index) in ListMedicalExadmin" :key="index">
        <i-col span="4" class="step-first-item step-first-rowledge">
          <el-form-item>
            <el-input :disabled="disabled" v-model="item.ProjectName" placeholder="" style="width:90%; height:100%;"></el-input>
          </el-form-item>
        </i-col>
        <i-col span="6" class="step-first-item step-first-rowledge">
          <el-form-item :prop="'MedicalPayDetail['+itemIndex+'].ListMedicalExadmin['+index+'].PayMoney'" :rules="[{ validator: checkPayMoney, trigger: 'blur' }]">
            <el-input :disabled="disabled" v-model="item.PayMoney" placeholder="" style="width:90%; height:100%;">
              <span slot="append" style="width:100%; height:100%;">元</span>
            </el-input>
          </el-form-item>
        </i-col>
        <i-col span="6" class="step-first-item step-first-rowledge">
          <el-form-item>
            <el-input :disabled="disabled" v-model="item.ReduceReason" placeholder="" style="width:90%; height:100%;">
            </el-input>
          </el-form-item>
        </i-col>
        <i-col span="3" class="step-first-item step-first-rowledge">
          <el-form-item :prop="'MedicalPayDetail['+itemIndex+'].ListMedicalExadmin['+index+'].ReducePayRate'" :rules="[{ validator: checkPayRate, trigger: 'blur' }]">
            <el-input :disabled="disabled" v-model="item.ReducePayRate" placeholder="" style="width:90%; height:100%;">
              <span slot="append" style="width:100%; height:100%;">%</span>
            </el-input>
          </el-form-item>
        </i-col>
        <i-col span="3" class="step-first-item step-first-rowledge">
          <!-- <i-input :value="item.ReducePayRate*item.PayMoney/100" placeholder="" style="width:100%; height:100%;"></i-input> -->
          {{isNaN(item.ReducePayRate*item.PayMoney/100)?0:(item.ReducePayRate*item.PayMoney/100)}}
        </i-col>
        <i-col span="2" class="step-first-item step-first-rowledge">
          <a :disabled="disabled" @click="removeItem(index)">刪除</a>
        </i-col>
      </div>
      <!-- row 3 btn-->
      <i-col v-if="!disabled" span="24" class="step-first-item step-first-blod">
        <Row>
          <i-col>
            <i-button @click="pushNewItem" type="dashed" long style="background-color:#f7f7f7;">+新增核減專案</i-button>
          </i-col>
        </Row>
      </i-col>
      <!-- row 4 -->
      <i-col span="16" class="step-first-item step-first-rowledge">
        <Row>
          <i-col span="6" class="step-first-blod">
            {{title}}
          </i-col>
          <i-col style="padding-left:10px" span="8">
            <el-form-item>
              <el-input v-model="selCost" placeholder="請輸入" style="width:100%; height:100%;">
                <span slot="append" style="width:100%; height:100%;">元</span>
              </el-input>
            </el-form-item>
          </i-col>
        </Row>
      </i-col>
      <i-col span="8" class="step-first-item step-first-blod step-first-rowledge">
        <i-col span="7">
          {{totalTitle}}
        </i-col>
        <i-col span="17">
          <font>{{intpatientCount}}</font>
        </i-col>
      </i-col>
    </Row>
  </div>
</template>

<script>
import Enumerable from 'linq'
export default {
  props: {
    title: {
      type: String,
      default: '預設'
    },
    items: {
      type: Array
    },
    EKey: {
      type: Number,
      default: 1
    },
    Cost: 0,
    totalTitle: {
      type: String,
      default: '門診扣減合計'
    },
    disabled: {
      type: Boolean
    },
    itemIndex: {
      type: Number,
      default: 0
    }
  },
  data: function () {
    return {
      source: {
      },
      followId: 0,
      ListMedicalExadmin: this.items,
      selCost: this.Cost
    }
  },
  computed: {
    intpatientCount: function () {
      return Enumerable.from(this.ListMedicalExadmin).sum(function (a) {
        let result = parseFloat(a.ReducePayRate) * parseFloat(a.PayMoney) / 100
        if (isNaN(result)) {
          return 0
        }
        return result
      })
    }
  },
  /**
   * 取消自動計算
   */
  watch: {
    selCost: function (val) {
      this.$emit('update:Cost', val)
    }
  },
  methods: {
    pushNewItem: function () {
      this.ListMedicalExadmin.push({
        'Id': 0,
        'ProjectName': '',
        'PayMoney': '0',
        'ReduceReason': '',
        'ReducePayRate': 0,
        'ReducePayMoney': 0,
        'ExaminationType': 0,
        'LossId': 0,
        'CreateTime': '',
        'UpdateTime': '',
        'IsDelete': 0,
        'LimiteMoney': 0,
        'FollowId': this.followId
      })
    },
    removeItem: function (index) {
      let _items = this.ListMedicalExadmin
      _items.splice(index, 1)
    },
    checkPayMoney: (rule, value, callback) => {
      if (parseInt(value) >= 0) {
        callback()
      } else {
        callback(new Error('金額必須大於等於0'))
      }
    },

    checkPayRate: (rule, value, callback) => {
      if (parseInt(value) >= 0 && parseInt(value) <= 100) {
        callback()
      } else {
        callback(new Error('必須在0-100之間'))
      }
    }
  }
}
</script>

相關推薦

element UI表單驗證：一個複雜迴圈表單渲染後資料修改後的部分表單項驗證

 一、前言 普通的表單驗證參考element UI官方文件即可找到解決方案並順利進行程式碼實現，官方也給出了幾個示例，是很好的參考。不過，對於複雜的表單驗證，官方文件並沒有給出過多示例或者說明。文章中的例項就是在實際專案中遇到的一個複雜表單的驗證問題。 文章中前端程式碼基

element-ui，router.push到其他路由，菜單欄不會高亮對應的路由

ati var ack pat 執行 post menu 並不會 self 使用餓了嗎的路由，使用this.$router.push({path: ‘‘})跳到其他的路由，菜單不會高亮。 如圖所示，點擊圖上三個位置，需要使用this.$router.push({path:

在python中使用openpyxl和xlrd建立一個新Excel並把原表格資料複製到新表中

在Python中使用openpyxl和xlrd建立一個新Excel並把原表格資料複製到新表中 新的開始 文科出生，經濟學專業，年近四旬，純粹是把這個當成一個興趣在學。很早之前就打算學Python，但是一直停留在安裝好Python，這幾天比較空閒，開始從最最基礎自

SQL Server基礎(五)VS2015 視覺化表關係圖：建立了三個存在聯絡的資料表，現在要把三個表用關係圖來描述。

一、資料表如下 二、視覺化表關係圖 視覺化表關係圖的方法，書本上是這樣說的： 但是我沒有找到有資料關係圖（Database Diagram）節點。於是百度，發現確實沒有資料關係圖（Database Diagram）這個節點。 https://bbs.csdn.net/to

efcore 跨表查詢，實現一個介面內查詢兩個不同資料庫裡各自的表資料

　　最近有efcore跨庫查詢的需求，研究了下colder框架裡文件的分庫實現，發現並不能完全實現一個介面下的跨庫查詢請求，只能滿足一個業務層構造指定的唯一一個數據庫訪問介面。 先說下文件是怎麼實現的 DbAccessor實現使用多資料庫 預設框架會自動注入IDbAccessor作為資料庫訪問介面,在需要的時

navicat還原mysql備份資料時，部分表無資料

最近在使用navicat正在本地恢復資料時，發現部分表資料，百度一下，發現是由於max_allowed_packed設定過小，而insert時資料過多導致出錯，修改max_allowed_packed的值即可恢復，我修改後的值為1024*1024*50。 表無資料： 部分資料未同步成功

標準ALV 資料修改與內表一致(一句話設定)

CALL FUNCTION 'REUSE_ALV_GRID_DISPLAY'EXPORTINGI_BACKGROUND_ID = 'SIWB_WALLPAPER'I_CALLBACK_PROGRAM = I_REPID       I_GRID_SETTINGS = LC_G

element ui 庫中 表單部分 一個很容易忽略的坑！

mod 希望 如果 pro mode 問題 -m form data 如果在使用element-ui1.4.* 版本中的表單時，發現某些字段綁定不了值，或者checkbox在你綁定後一點就全選了或者全部選，又或者表單驗證時候有些字段沒動靜，那麽十有八九是： 1、el-for

v-if案例解析（element-ui form-item表單無法驗證問題剖析 ）

變化 其他 idt 沒有 light 出現異常 div template temp fire 讀在最前面： 　　1、此文章銜接Vue 虛擬Dom 及 部分生命周期初探，相關整體知識點請先閱讀後再繼續本文閱讀 問：當v-if為true時，會重新渲染相關dom節點嗎?

element-ui 表單驗證的問題

最近在做的專案有表單驗證的問題，因為有切換顯示 ， 當我選擇發放規則為固定金額時，沒有輸入金額，有提示資訊，單擊切換髮放規則，出現如下圖 全部商品下方會出現“請輸入金額的驗證資訊” 解決辦法：當切換的時候去watch發放規則的狀態，然後清除驗證 "formDat

element-ui和vue表單（對話方塊）驗證提示語(殘留)清除

問題是這樣的: 如果一個頁面有多個按鈕開啟相同的element-ui的Dialog對話方塊，那麼如果第一個點選"順序"按鈕出現紅色驗證提示語後， 再點選“取消”，或者點選頁面空白處此對話方塊消失，而後再點選同一個“順序”按鈕亦或別的“順序”按鈕， 那麼此紅色提示依然存在，顯

element-ui 無法對繫結表單的物件中的物件屬性進行驗證

  <el-form-item label="型別" :label-width="formLabelWidth" prop="typeId"> <template> <el-select v-model="form.typeId" cl

element-ui Form表單驗證規則全解

element的form表單非常好用,自帶了驗證規則,用起來很方便,官網給的案例對於一些普通場景完全沒問題,不過一些複雜場景的驗證還得自己多看文件摸索,自己經過數次爬坑 之後,總結了幾種form表單的驗證規則,為了便於閱讀,驗證規則是拆分的,完整的程式碼放在文末  

element-ui的表單驗證如何清除校驗提示語

  問題描述：     如圖，當編輯和新增用的同一個彈出框時，input框裡的表單驗證會相互影響。在編輯框中輸入了不符合驗證規則的內容時會出現錯誤提示，這時如果直接關閉彈窗，那麼在開啟新增人員的彈窗時，即使將表單中的內容都手動清空了，剛剛的校驗提示語也依然會存在。

餓了麼元件庫element-ui正則表示式驗證表單，後端驗證表單

vue+elementui 提高開發效率，以下為form表單驗證例子。包含自定義驗證等。 1. 以中國大陸手機號驗證為例 // 這是組價的程式碼 <el-form-item prop="mobile"> <el-input type="text

element-ui 表單自定義驗證

element-ui提供了一套表單驗證規則，非常方便，但也要注意一些地方。html<el-form :inline="true" :model="newReg" :rules="rules" re

vue + element-ui 的表單驗證失效問題

首先先描述寫問題   我用的是element-ui 1.4 版本 做的一個後臺管理系統，我在對使用者進行新增的時候有個模態框裡面有表單驗證，在修改使用者資料的時候也有一個表單驗證。當我進來先點選了編輯使用者資料的時候，在點選新增使用者，發現表單驗證失效了。我在每一次關閉的時候

element-ui表單驗證無效解決

最近在專案中遇到了一個需求，需要動態增減表單元素，同時給新增的表單元素增加校驗規則。 element-ui官網給出瞭解決方案：點選新增按鈕時，向迴圈渲染的陣列中push新的物件，資料驅動檢視，通過增加資料的方式來增加新的dom元素；同樣的，通過刪除迴圈遍歷的資料來達到刪除dom的效果。 但是，校驗規則不起作用

Vue + Element-ui實現後臺管理系統(5)---封裝一個Form表單元件和Table表格元件

# 封裝一個Form表單元件和Table元件 有關後臺管理系統之前寫過四遍部落格,看這篇之前最好先看下這四篇部落格。另外這裡只展示關鍵部分程式碼，專案程式碼放在github上： [mall-manage-system](https://github.com/yudiandemingzi/mall-manag

(vue.js)element ui 表單重置

pro too DG cef service widget 一個 方法 model el-form需要接收一個model，並且需要配合el-form-item一起使用，並且在el-form-item上綁定prop屬性，resetField方法才能好使。 <el-