html5验证了vue.js多形式

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验证，您需要设置 input 标签的类型，但这还不够，因为现在规范仅涵盖了某些输入类型，例如：日期，电子邮件，号码(对于数字，您可以设置最小和最大值的范围(。我们需要检查您的文本输入组件，以了解为什么不使用HTML验证。

如果您只需要验证每个 input 是填充，则可以将所需的属性添加到这些元素中。