vuejs2 - VeeValidate 范围验证不起作用
问题描述
我正在构建一个在同一页面上有多个表单的 Web 应用程序,因此VeeValidate 的范围验证看起来是一个显而易见的选择,但我无法使其工作。
无论我做什么,模型总是有效的。我建立了一个小例子来帮助你帮助我 https://jsfiddle.net/pvkovalev/3vwp9zdo/
这是我的 HTML 代码:
<div id="app">
<div data-vv-scope="InformationStep1">
<input v-model="input1" v-validate="{required: true}" />
</div>
<div data-vv-scope="InformationStep2">
<input v-model="input2" v-validate="{required: false}" />
</div>
<input type="button" @click="validate" value="validate" />
</div>
和 JS:
Vue.use(VeeValidate)
new Vue({
el: "#app",
data: {
input1: undefined,
input2: 'not required'
},
methods: {
validate: function (){
this.$validator.validateAll('InformationStep1').then((result) => {
alert('InformationStep1 valid: '+ JSON.stringify(result))
})
this.$validator.validateAll('InformationStep2').then((result) => {
alert('InformationStep2 valid: '+ JSON.stringify(result))
})
}
}
})
我在这里错过了什么?也许,一些显而易见的事情。任何帮助表示赞赏!
解决方案
我找到了!
好的,所以解决方案是使用form 标签,而不是div标签。一旦我改变它,它就像一个魅力。
这是一个新代码:
<div id="app">
<form data-vv-scope="InformationStep1">
<input v-model="input1" v-validate="{required: false}" />
</form>
<form data-vv-scope="InformationStep2">
<input v-model="input2" v-validate="{required: true}" />
</form>
<input type="button" @click="validate" value="validate" />
</div>
推荐阅读
- html - 使用 XPath 在 Python 中选择下一个节点
- java - Eclipse 和 Java SDK
- .net - RabbitMQ 关闭时的 Masstransit 重新连接策略
- flutter - 使用 codemagic.io 构建 Flutter sqflite ios 应用程序
- microsoft-translator - 自定义翻译器 - 如何训练机器识别正确的翻译解决方案(同义词)?
- swift - 防止 UIView(滑入菜单)在单击后关闭,但允许在单击后滑入
- php - 如何在另一个数据库中显示所有记录及其属性?
- javascript - 关闭nodejs程序内的Oracle DB连接后如何从函数返回值
- shell - 无法删除大于 2GB 的文件
- php - 是否可以使用 php、jquery、mysql 以一种形式保存多个文件上传和其他数据?