他們說大多數(shù)網(wǎng)絡(luò)應(yīng)用只是HTML表單。好吧，表單需要驗(yàn)證，謝天謝地，HTML5帶有許多優(yōu)秀的內(nèi)置表單驗(yàn)證功能，可用于電子郵件，數(shù)字，最大值，分鐘等。您甚至可以使用模式編寫自己的驗(yàn)證規(guī)則。在本文中，我將討論如何在覆蓋無聊的默認(rèn)值時(shí)利用HTML5驗(yàn)證，以便您可以根據(jù)需要顯示驗(yàn)證錯(cuò)誤。我將與Vuejs合作，但即使你不使用Vue，你也可以隨時(shí)跟進(jìn)。

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

使用Vuejs Starter進(jìn)行HTML驗(yàn)證

默認(rèn)的HTML5驗(yàn)證不會(huì)立即顯示所有表單錯(cuò)誤。具有諷刺意味的是，一旦用戶提交，瀏覽器實(shí)際上就知道所有無效字段，所以現(xiàn)在我們所要做的就是檢查它們?nèi)缓箫@示我們喜歡的內(nèi)容。

現(xiàn)在讓我們?yōu)楸韱魏鸵粋€(gè)使用Vuejs捕獲提交事件的監(jiān)聽器添加一個(gè)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>

添加事件監(jiān)聽器以提交表單

然后在我們的form-validation.js文件中，我們將初始化Vuejs并創(chuàng)建處理表單提交和驗(yàn)證的方法。

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;
        }
    }
});

這里我們創(chuàng)建了兩個(gè)方法submitForm和validateForm。submitForm調(diào)用validateForm，如果滿足所有驗(yàn)證規(guī)則，則返回true?，F(xiàn)在，我們從控制日志記錄中查看所有無效的表單輸入，我們可以找到許多有趣的屬性，包括我們可以向用戶顯示的validationMessage。

輸入屬性無效

接下來，讓我們創(chuàng)建將保存每個(gè)無效輸入的validationErrors的數(shù)據(jù)屬性。然后我們將循環(huán)遍歷無效輸入數(shù)組以設(shè)置每個(gè)輸入。

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;
            }
        }
    }
});

在這里，我們做了很多事情。我們創(chuàng)建了validationErrors數(shù)據(jù)屬性來保存每個(gè)字段的錯(cuò)誤消息。validationErrors對(duì)象的每個(gè)屬性對(duì)應(yīng)于要驗(yàn)證的每個(gè)表單元素的name屬性。因此在validateForm方法中，我們清除任何先前的錯(cuò)誤消息，然后遍歷無效字段以設(shè)置其相應(yīng)的validationErrors。我們還添加了一個(gè)事件偵聽器，一旦無效字段發(fā)生更改，就會(huì)重新驗(yàn)證。

現(xiàn)在我們需要為要驗(yàn)證的每個(gè)字段添加名稱屬性，這在制作表單時(shí)非常正常。然后，我們還應(yīng)該添加將向用戶顯示錯(cuò)誤消息的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>

現(xiàn)在，一旦我們提交表單，我們的用戶就可以看到他們需要修復(fù)的所有驗(yàn)證錯(cuò)誤。很酷的是我們已經(jīng)完成了它而無需引入額外的庫來進(jìn)行驗(yàn)證。現(xiàn)在，因?yàn)槲覀冋诶肰ue的數(shù)據(jù)綁定能力，我們可以從這里獲得有關(guān)我們希望如何顯示錯(cuò)誤的創(chuàng)意。

使用HTML5模式

如果我們需要超出可用的驗(yàn)證規(guī)則，該怎么辦？例如，檢查郵政編碼是否有效。這就是HTML5模式非常有用的地方，因?yàn)槲覀兛梢栽贖TML中編寫正則表達(dá)式來執(zhí)行我們需要的任何類型的檢查。我覺得有人正在宣誓正常表達(dá)，但幸運(yùn)的是你可以在html5pattern.com上找到一大堆有用的正則表達(dá)式。

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

<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>

添加標(biāo)題和模式屬性

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

這里我們添加了一個(gè)if-else塊來檢查title屬性，如果找不到則只顯示默認(rèn)錯(cuò)誤消息。此外，formId和errorObjectName變量現(xiàn)在被傳遞到validateForm函數(shù)，這允許我們?cè)谕粋€(gè)網(wǎng)頁上驗(yàn)證我們選擇的方式和方式。

我們已經(jīng)能夠?yàn)楸韱悟?yàn)證創(chuàng)建一個(gè)簡(jiǎn)單的約定配置方法。一旦我們?cè)?strong>validationErrors對(duì)象中指定了表單字段的名稱屬性，我們的cool validateForm函數(shù)就會(huì)利用內(nèi)置的HTML5功能來完成剩下的工作，我們需要做的就是按照我們想要的方式顯示錯(cuò)誤。一如既往，我希望這有助于某人。

如果您正在使用Vue，則可以使用此代碼段快速啟動(dòng)驗(yàn)證，并且它也不應(yīng)該很難應(yīng)用于其他前端框架。您還可以在 此repo和演示網(wǎng)站上找到本文的工作代碼。

干杯!

轉(zhuǎn)：https://itnext.io/form-validation-with-html-vuejs-54ec18e473aa