這幾天做動態表單驗證，在沒獲取數據之前，所有字段都不知道，因為服務器個數和每個服務器的配置項或者配置項名稱都是不確定的，全部都是動態變換的，無法寫死。
做的是配置管理模塊，主要是對各個服務器中心進行配置修改，新增配置項是在后端那邊實現，前端只負責修改。這代表着前端只能動態生成，不然后端新增或者修改一個配置項或者配置項名稱，前端就要跟着改一次，這樣太麻煩了，頁面大概是這樣的：
表單代碼如下：
注意：item是屬性名，value是屬性值。
也許有人感到迷惑，為什么input里的v-model不直接寫value，而是用對象的方式獲取屬性值，那是因為直接寫v-model="value"會報錯
以上動態表單已經生成了，下面講講動態生成表單驗證信息。由於配置服務器個數不確定以及配置字段不確定，后端也不好做驗證，前端更不好做驗證，故而只做簡單的非空和長度驗證，這是每個表單共用的。
elementUI Form驗證，注意，prop這個字段是必要的，你不寫表單驗證就不會生效。
下面圖中的代碼是動態生成每個服務器對應的表單驗證對象數據的。
cloneCurrentConfigContent對象是currentConfigContent對象的復制，因為在填寫表單的時候，會讓currentConfigContent對象的值發生變化，這會導致驗證效果會和我們要的效果有出入，緩存一個對象它的值是不會變的，可以進行實時正確的驗證。
在切換服務器函數中引用這個函數時，注意一下，可能因為復制對象的緣故，如果不加$nextTick函數，會在切換服務器時，每個服務器的配置項中，總有幾個配置項驗證會出問題，加這個函數后，就可以完美解決這個問題，每項驗證都正確
以上就是vue+elementUI+TS+Form動態創建表單和動態創建驗證的所有信息，如有不懂，請留言，我看到會回復大家的