如何在我的 Vue 向导表单中使用字段验证?
How can I use field validation in my Vue wizard form?
在 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>
如果您这样设置,则可以使用浏览器验证:
<form @submit.prevent="submitMyForm">
<input v-model="form.title" required minlength="4" maxlength="20" />
<button type="submit">Submit</button>
</form>
现在,如果 title
为空,如果长度小于 4 或大于 20,您的浏览器将阻止您提交表单。
这个解决方案可以做很多事情,甚至是正则表达式检查:
然而,这仅限于一小部分检查,并且不受旧版浏览器支持。如果您需要非常具体的验证,则必须使用此处描述的自定义解决方案 https://vuejs.org/v2/cookbook/form-validation.html。
在 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>
如果您这样设置,则可以使用浏览器验证:
<form @submit.prevent="submitMyForm">
<input v-model="form.title" required minlength="4" maxlength="20" />
<button type="submit">Submit</button>
</form>
现在,如果 title
为空,如果长度小于 4 或大于 20,您的浏览器将阻止您提交表单。
这个解决方案可以做很多事情,甚至是正则表达式检查:
然而,这仅限于一小部分检查,并且不受旧版浏览器支持。如果您需要非常具体的验证,则必须使用此处描述的自定义解决方案 https://vuejs.org/v2/cookbook/form-validation.html。