使用Vee-Validate和vue验证子输入组件js 2
问题描述:
我目前正在尝试创建一个注册表单,其中包含多个“输入字段”组件,一旦按下提交按钮后,所有组件都需要验证。当它们中的文本被改变时,它们全部目前都自行验证,但是我发现难以对所有输入字段进行全局调用来验证所有内容。我想实现如下:http://vee-validate.logaretm.com/examples#validate-form使用Vee-Validate和vue验证子输入组件js 2
是的,这是simmiler这个问题Validate child input components on submit with Vee-Validate 但我不明白
我有singleInput.vue
<template lang="html">
<div :class="'col m'+col">
<div class="input-field">
<i v-if="icon" class="material-icons prefix">{{icon}}</i>
<input
v-if="area"
:type="type"
@input="onChange"
:id="id"
:required="required"
:name="id"
v-validate="'required'"
/>
<textarea
v-if="!area"
@input="onChange"
:id="id"
:required="required"
:name="id"
class="materialize-textarea"></textarea>
<label :for="id">
{{label}}
<span v-if="required" class="red-text">*</span>
</label>
<span class="red-text error">{{$store.state.errors[id]}}</span>
</div>
</div>
</template>
<script>
export default {
name:'single-input',
props: {
col:{
type: Number,
default:6
},
id:{
type: String,
required:true
},
required:{
type:Boolean,
default: true
},
label:{
type:String,
required:true
},
onChange:{
type:Function,
required:true
},
area:{
type: Boolean,
default: true
},
type:{
type: String,
default: "text"
},
icon:{
type:String
},
validation:{
type:String
}
}
}
</script>
<style lang="css">
</style>
和Info.vue
<template lang="html">
<div class="row">
<single-input v-for="(info,i) in informations" :id="info.id" :label="info.label" :onChange="onChange" :area="info.area" :key="i" :required="info.required" :col="info.col" :type="info.type" :icon="info.icon"></single-input>
</div>
</template>
<script>
import SingleInput from "./SingleInput";
export default {
name: 'info',
methods:{
onChange(e){
}
},
data(){
return{
informations:[
{
label: "First Name",
id: "fname",
icon: "person"
},
{
label: "Last Name",
id: "lname",
required:false,
icon: "person"
},
{
label: "Email",
id: "email",
type:"email",
icon:'email'
},
{
label: "Telephone",
id: "phone",
type:"text",
icon:'phone'
},
{
label: "Department",
id: "depa",
type:"text",
icon:'domain'
},
{
label: "Organization",
id: "org",
type:"text",
icon:'account_balance'
},
{
label: "Address",
id: "address",
icon:'directions',
area: false,
col:12
},
{
label: "City",
id: "city",
type:"text",
icon:'place'
},
{
label: "Post code",
id: "post",
type:"text",
icon:'pin_drop'
}
]
}
},
components:{
SingleInput
}
}
</script>
<style lang="css">
</style>
我尽我所能,但无法访问info.vue中的错误
任何帮助将不胜感激!
答
在您的例子我看不到任何验证尝试,但这里是我的jsfiddle工作示例:link
我做了什么: -add提交方法信息组件
submit: function(){
var validationArray = this.$children.map(function(child){
return child.$validator.validateAll();
});
window.Promise.all(validationArray).then((v) => {
alert('From Submitted!');
}).catch(() => {
alert('Correct them errors!');
});
}
这方法基本上验证您的信息的所有孩子(在这种情况下单一输入)。
-changed跨度有点模板与错误消息:
{{ ($validator.getErrors().errors.length > 0) ? $validator.getErrors().errors[0].msg : '' }}
编辑: 我只能客串什么是错误的与您的代码,但我相信你的情况是事实,你有这个问题访问具有输入的组件的“直接”验证器 - 单输入,而不是信息组件。
这很好,它触发验证器,但是catch()的逻辑并不完全正确,我认为(它看起来好像没有被捕获)。容易解决这个问题,并且解决了这个问题。 – philw