通過vue.js多格式進行HTML5驗證

Question

我有一個vue.js表單，其中包含多個表單步驟，需要簡化的html5驗證，如下所示：

<template>
    <div>
        <div v-if="activeForm === 1">

            <h2>
                How much does {{ form.name }} weight?
            </h2>

            <text-input
                    v-model="form.weight"
                    name="weight"
                    :errors="form.errors"
                    type="number"
                    placeholder="For example: 20 kg"
                    required>
            </text-input>
        </div>

        <div v-if="activeForm === 2">

            <h2>
                Search here
            </h2>

            <select-search></select-search>
        </div>

        <button v-if="activeForm > 1"
                @click="previousForm()">
            Previous
        </button>

        <button @click="nextForm">
            Finish
        </button>
    <div>
</template>

<script>
    export default {
        data() {
            return {
                activeForm: 1,
                totalForm: 6
            }
        },

        methods: {
            previousForm() {
                if (this.activeForm > 1) {
                    this.activeForm--;
                }
            },

            nextForm() {
                if (this.activeForm < 6) {
                    this.activeForm++;
                }
            }
        }
    }
</script>

目前，顯然HTML5驗證無法正常工作。 但是，如何在每個表單步驟中驗證任何想法（我想通過1個ajax調用提交表單）？

Answer 1

要使用HTML驗證，您需要設置輸入標簽的類型，但這還遠遠不夠，因為目前規范僅涵蓋了一些輸入類型，例如：日期，電子郵件，數字，（對於數字，您可以設置最小值和最大值）。 我們將需要檢查您的文本輸入組件，以查看為什么HTML驗證無法正常工作。

如果僅需要驗證每個輸入是否已由用戶填寫 ，則可以將必需的屬性添加到這些元素。