他們說大多數網絡應用隻是HTML表單。好吧，表單需要驗證，謝天謝地，HTML5帶有許多優秀的内置表單驗證功能，可用于電子郵件，數字，最大值，分鐘等。您甚至可以使用模式編寫自己的驗證規則。在本文中，我将讨論如何在覆寫無聊的預設值時利用HTML5驗證，以便您可以根據需要顯示驗證錯誤。我将與Vuejs合作，但即使你不使用Vue，你也可以随時跟進。
讓我們從Bootstrap示例的Checkout表單的開始，這樣我們就不必過于擔心樣式了。您可以在此處克隆器。設定應如下所示：
使用Vuejs Starter進行HTML驗證
預設的HTML5驗證不會立即顯示所有表單錯誤。具有諷刺意味的是，一旦使用者送出，浏覽器實際上就知道所有無效字段，是以現在我們所要做的就是檢查它們然後顯示我們喜歡的内容。
現在讓我們為表單和一個使用Vuejs捕獲送出事件的監聽器添加一個id。
First name Valid first name is required. Last name Valid last name is required. SUBMIT
添加事件監聽器以送出表單
然後在我們的form-validation.js檔案中，我們将初始化Vuejs并建立處理表單送出和驗證的方法。
const vueApp = new Vue({ el: '#validated-form', methods: { submitForm () { if (this.validateForm()) { console.log('formValidated'); //submit form to backend } }, validateForm () { var formId = 'validated-form'; var nodes = document.querySelectorAll(`#${formId} :invalid`); console.log(nodes); return true; } }});
這裡我們建立了兩個方法submitForm和validateForm。submitForm調用validateForm，如果滿足所有驗證規則，則傳回true。現在，我們從控制日志記錄中檢視所有無效的表單輸入，我們可以找到許多有趣的屬性，包括我們可以向使用者顯示的validationMessage。
輸入屬性無效
接下來，讓我們建立将儲存每個無效輸入的validationErrors的資料屬性。然後我們将循環周遊無效輸入數組以設定每個輸入。
const vueApp = new Vue({ el: '#validated-form', data: function () { return { validationErrors: { firstName: null, lastName: null, username: null, email: null, address: null, country: null, state: null, zip: null, } } }, methods: { submitForm () { if (this.validateForm()) { alert('Form Submitted') //submit form to backend } }, validateForm () { var formId = 'validated-form'; var nodes = document.querySelectorAll(`#${formId} :invalid`); var errorObjectName = 'validationErrors'; var vm = this; //current vue instance; Object.keys(this[errorObjectName]).forEach(key => { this[errorObjectName][key] = null }); if (nodes.length > 0) { nodes.forEach(node => { this[errorObjectName][node.name] = node.validationMessage; node.addEventListener('change', function (e) { vm.validateForm(); }); }); return false; } else { return true; } } }});
在這裡，我們做了很多事情。我們建立了validationErrors資料屬性來儲存每個字段的錯誤消息。validationErrors對象的每個屬性對應于要驗證的每個表單元素的name屬性。是以在validateForm方法中，我們清除任何先前的錯誤消息，然後周遊無效字段以設定其相應的validationErrors。我們還添加了一個事件偵聽器，一旦無效字段發生更改，就會重新驗證。
現在我們需要為要驗證的每個字段添加名稱屬性，這在制作表單時非常正常。然後，我們還應該添加将向使用者顯示錯誤消息的span元素。
First name Last name Username @ Email (Optional) SUBMIT
現在，一旦我們送出表單，我們的使用者就可以看到他們需要修複的所有驗證錯誤。很酷的是我們已經完成了它而無需引入額外的庫來進行驗證。現在，因為我們正在利用Vue的資料綁定能力，我們可以從這裡獲得有關我們希望如何顯示錯誤的創意。
使用HTML5模式
如果我們需要超出可用的驗證規則，該怎麼辦？例如，檢查郵政編碼是否有效。這就是HTML5模式非常有用的地方，因為我們可以在HTML中編寫正規表達式來執行我們需要的任何類型的檢查。我覺得有人正在宣誓正常表達，但幸運的是你可以在html5pattern.com上找到一大堆有用的正規表達式。
好吧，找到一個正規表達式比我想象的要困難一些。事實證明，他們大多是7位數字。是以[0-9] {13,16}應該可以正常工作。現在我們遇到了一個新問題。關于HTML5模式的錯誤消息不是很有用，是以我們需要指定自己的。我們需要一種方法來告訴validateForm函數顯示什麼消息。
Zip SUBMIT
添加标題和模式屬性
然後我們可以在validateForm方法中檢查title屬性：
validateForm (formId = 'validated-form', errorObjectName = 'validationErrors') { var nodes = document.querySelectorAll(`#${formId} :invalid`); var vm = this; //current vue instance; Object.keys(this[errorObjectName]).forEach(key => { this[errorObjectName][key] = null }); if (nodes.length > 0) { nodes.forEach(node => { if (node.title) { this[errorObjectName][node.name] = node.title; } else { this[errorObjectName][node.name] = node.validationMessage; } node.addEventListener('change', function (e) { vm.validateForm(formId, errorObjectName); }); }); return false; } else { return true; }}
這裡我們添加了一個if-else塊來檢查title屬性，如果找不到則隻顯示預設錯誤消息。此外，formId和errorObjectName變量現在被傳遞到validateForm函數，這允許我們在同一個網頁上驗證我們選擇的方式和方式。
我們已經能夠為表單驗證建立一個簡單的約定配置方法。一旦我們在validationErrors對象中指定了表單字段的名稱屬性，我們的cool validateForm函數就會利用内置的HTML5功能來完成剩下的工作，我們需要做的就是按照我們想要的方式顯示錯誤。一如既往，我希望這有助于某人。
如果您正在使用Vue，則可以使用此代碼段快速啟動驗證，并且它也不應該很難應用于其他前端架構。您還可以在 此repo和示範網站上找到本文的工作代碼。
幹杯!
轉：https://itnext.io/form-validation-with-html-vuejs-54ec18e473aa