Element-ui中的el-form組件自帶了驗證功能，方便了我們的開發。然而，在開發中經常會遇到一些莫名其妙的問題，比如表單一出來就觸發了驗證、驗證提示出現英文等等。通過查看源代碼的方式，我終於找到了問題的根源，也有了解決方法。
在我的項目的一個頁面中，需要彈出表單框並填入舊數據。然而，我只要拿到舊數據並賦值到表單上時，就會觸發el-form的驗證，非常惱人。順着調用棧（下圖）我們可以發現是el-form-item組件的一個叫onFieldChange的方法觸發了validate。應該是我們每次給表單綁定的變量重新賦值時，即賦值舊值時，觸發了el.form.change事件，從而觸發了表單驗證。
驗證結果調用棧
於是，我們可以把驗證方式從所有（默認）改成只在blur時才觸發，這樣就避免了賦值時觸發change導致的驗證。
然而，新的問題接踵而至，現在打開彈框不僅驗證沒有消失，驗證結果還出現了英文提示：
英文提示
這是為什么呢？我在validate方法里面打斷點，發現rules出現了一個{ required: true }，然而我並沒有加這個驗證條件。很明顯這個驗證條件沒帶message，導致出現了英文。
往前追蹤，在getRules里面發現了這個坑的來源：如果el-form-item組件設置了required屬性為true，就會加上這條坑爹的驗證，產生英文提示。嗯，把el-form-item的required屬性去掉就好了。
現在問題圓滿解決，總結一下就是：el-form-item組件千萬不要使用required屬性（這個屬性的初衷難道就是為了坑中文開發者的嗎）；驗證最好要加上trigger: 'blur'，不然每次賦值都會觸發驗證。
作者：898310778
鏈接：https://www.jianshu.com/p/d2c900f7b730
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。