如何在Vue向导表单中使用字段验证？

Question

在example of a Vue wizard form中，我尝试使用Joi添加表单验证。如何进行逻辑设置？目的是控制字段，然后使用next()方法移至第二页和最后一页。由于此向导表单的简单性，我不想更改为VueFormWizard。为了增加代码，我擦除了很多字段等。

<template>
  <div>
    <div v-if="errorMessage" class="alert alert-danger" role="alert">
      {{errorMessage}}
    </div>
    <form>
      <div v-if="step ===1 ">
        <div class="form-group">
          <label for="title">Title</label>
          <input v-model="example.title"
                 type="text"
                 class="form-control"
                 id="title" />
         </div>
      <button @click.prevent="next()">Next step</button>
      </div>
      <div v-if="step === 2">
        <div class="form-group">
          <label for="userName">Email.</label>
          <input v-model="example.userName"
                 type="email"
                 class="form-control"
                 id="userName" />         
         </div>       
        <button @click.prevent="prev()">Go back</button>
        <button @click.prevent="createExample" type="submit" class="btn btn-primary">Submit</button>
      </div>
    </form>
  </div>
</template>

<script>
import Joi from 'joi'

const schema = Joi.object().keys({
  title: Joi.string().alphanum().min(2).max(40).required(),  
  userName: Joi.string().email(),
  })

export default {
  data: () => ({
    step: 1,
    errorMessage: false,
    example: {
      title: '',
      userName: ''
    }
  }),
  watch: {
    example: {
      handler () {
        this.errorMessage = ''
      },
      deep: true
    }
  },
  methods: {
    prev () {
      this.step--
    },
    next () {
      this.step++
      if (this.validUser()) {
           return false
      }
    },
    createExample () {
     // Post request
    },
    validUser () {
      const result = Joi.validate(this.huismap, schema)     
		return true
	if (result.error.message.includes('title')) {
    this.errorMessage = 'Vul een titel in van min 2 karakters'
    return false
    }
  }
}
</script>

Answer 1

如果您按照以下方式进行设置，则可以利用浏览器验证：

<form @submit.prevent="submitMyForm">
    <input v-model="form.title" required minlength="4" maxlength="20" />

    <button type="submit">Submit</button>
</form>

如果title为空，且长度小于4或大于20，现在您的浏览器将阻止您提交表单。

此解决方案可以完成很多工作，甚至可以进行正则表达式检查：

https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation#Validating_against_a_regular_expression

但是，这仅限于一小部分检查，并且旧版浏览器不支持。如果您需要非常具体的验证，则必须使用自定义解决方案，https://vuejs.org/v2/cookbook/form-validation.html在此进行了介绍。