他們說大多數網絡應用只是html表單。好吧，表單需要驗證，謝天謝地，HTML5帶有許多優秀的內置表單驗證功能，可用于電子郵件，數字，最大值，分鐘等。您甚至可以使用模式編寫自己的驗證規則。在本文中，我將討論如何在覆蓋無聊的默認值時利用HTML5驗證，以便您可以根據需要顯示驗證錯誤。我將與Vuejs合作，但即使你不使用Vue，你也可以隨時跟進。

讓我們從Bootstrap示例的Checkout表單的開始，這樣我們就不必過于擔心樣式了。您可以在此處克隆器。設置應如下所示：

使用Vuejs Starter進行HTML驗證

默認的HTML5驗證不會立即顯示所有表單錯誤。具有諷刺意味的是，一旦用戶提交，瀏覽器實際上就知道所有無效字段，所以現在我們所要做的就是檢查它們然后顯示我們喜歡的內容。

現在讓我們為表單和一個使用Vuejs捕獲提交事件的監聽器添加一個id。

<form class="needs-validation" id="validated-form">
 <div class="row">
 <div class="col-md-6 mb-3">
 <label for="firstName">First name</label>
 <input type="text" class="form-control" id="firstName" placeholder="" value="" required>
 <div class="invalid-feedback">
 Valid first name is required.
 </div>
 </div>
 <div class="col-md-6 mb-3">
 <label for="lastName">Last name</label>
 <input type="text" class="form-control" id="lastName" placeholder="" value="" required>
 <div class="invalid-feedback">
 Valid last name is required.
 </div>
 </div>
 </div>
 <!-- Rest of the form removed to save space -->
 <button class="btn btn-primary btn-lg btn-block" type="submit" @click.prevent="submitForm()">SUBMIT</button>
</form>

添加事件監聽器以提交表單

然后在我們的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元素。

<form class="needs-validation" id="validated-form">
 <div class="row">
 <div class="col-md-6 mb-3">
 <label for="firstName">First name</label>
 <input type="text" class="form-control" name="firstName" placeholder="" value="" required>
 <span class="text-danger" v-if="validationErrors.firstName" v-text="validationErrors.firstName"></span>
 </div>
 <div class="col-md-6 mb-3">
 <label for="lastName">Last name</label>
 <input type="text" class="form-control" name="lastName" placeholder="" value="" required>
 <span class="text-danger" v-if="validationErrors.lastName" v-text="validationErrors.lastName"></span>
 </div>
 </div>
 <div class="mb-3">
 <label for="username">Username</label>
 <div class="input-group">
 <div class="input-group-prepend">
 <span class="input-group-text">@</span>
 </div>
 <input type="text" class="form-control" name="username" placeholder="Username" required>
 <span class="text-danger" v-if="validationErrors.username" style="width: 100%;" v-text="validationErrors.username"></span>
 </div>
 </div>
 <div class="mb-3">
 <label for="email">Email <span class="text-muted">(Optional)</span></label>
 <input type="email" class="form-control" name="email" placeholder="you@example.com">
 <div class="text-danger" v-if="validationErrors.email" style="width: 100%;">
 <span v-text="validationErrors.email"></span>
 </div>
 </div>
 
 <!-- Rest of form hidden for space -->
 <button class="btn btn-primary btn-lg btn-block" type="submit"
 @click.prevent="submitForm()">SUBMIT</button>
</form>

現在，一旦我們提交表單，我們的用戶就可以看到他們需要修復的所有驗證錯誤。很酷的是我們已經完成了它而無需引入額外的庫來進行驗證。現在，因為我們正在利用Vue的數據綁定能力，我們可以從這里獲得有關我們希望如何顯示錯誤的創意。

使用HTML5模式

如果我們需要超出可用的驗證規則，該怎么辦？例如，檢查郵政編碼是否有效。這就是HTML5模式非常有用的地方，因為我們可以在HTML中編寫正則表達式來執行我們需要的任何類型的檢查。我覺得有人正在宣誓正常表達，但幸運的是你可以在html5pattern.com上找到一大堆有用的正則表達式。

好吧，找到一個正則表達式比我想象的要困難一些。事實證明，他們大多是7位數字。所以[0-9] {13,16}應該可以正常工作。現在我們遇到了一個新問題。關于HTML5模式的錯誤消息不是很有用，所以我們需要指定自己的。我們需要一種方法來告訴validateForm函數顯示什么消息。

<form class="needs-validation" id="validated-form">
 <div class="row">
 <!-- Rest of form hidden for space -->
 
 <div class="col-md-3 mb-3">
 <label for="zip">Zip</label>
 <input type="text" class="form-control" name="zip" placeholder="" pattern="[0-9]{7}" title="Invalid Zip Code" required>
 <span class="text-danger" v-if="validationErrors.zip" style="width: 100%;" v-text="validationErrors.zip"></span>
 </div>
 </div>
 <button class="btn btn-primary btn-lg btn-block" type="submit"
 @click.prevent="submitForm()">SUBMIT</button>
</form>

添加標題和模式屬性

然后我們可以在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