他們說大多數網絡應用只是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

總結

以上是生活随笔為你收集整理的float js 正则 验证_使用HTML和Vuejs进行表单验证的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。