我目前正在尝试创建一个包含多个“输入字段”组件的注册表单,这些组件都需要在按下“提交”后进行验证。目前,当其中的文本发生更改时,它们都会自行验证,但我发现很难对所有输入字段进行全局调用以验证所有输入字段。我想要实现的目标如下:http://vee-validate.logaretm.com/examples#validate-form http://vee-validate.logaretm.com/examples#validate-form
是的,这与这个问题类似使用 Vee-Validate 验证提交时的子输入组件 https://stackoverflow.com/questions/41022935/validate-child-input-components-on-submit-with-vee-validate但我不明白
我有一个Input.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 中的错误
任何帮助将非常感激!