vue表单同时提交两个表单并验证
vant表单同时验证两个<template><div><van-form ref="oneform"><van-field:value="username"name="username"label="用户名"requiredplaceholder="用户名":rules="[{ requ
·
表单提交同时验证两个
<template>
<div>
<van-form ref="oneform">
<van-field
:value="username"
name="username"
label="用户名"
required
placeholder="用户名"
:rules="[{ required: true,trigger:'onSubmit', message: '请填写用户名' }]"
/>
<van-field
:value="password"
type="password"
name="password"
required
label="密码"
placeholder="密码"
:rules="[{ required: true,trigger:'onSubmit', message: '请填写密码' }]"
/>
</van-form>
<van-form ref="twoform">
<van-field
:value="email"
required
name="email"
label="邮箱"
placeholder="邮箱"
:rules="[{ required: true,trigger:'onSubmit', message: '请填写邮箱' }]"
/>
<van-field
:value="phone"
name="phone"
required
label="手机号码"
placeholder="手机号码"
:rules="[{ required: true,trigger:'onSubmit', message: '请填写手机号码' }]"
/>
</van-form>
<div style="margin: 16px;">
<van-button round block type="primary" @click="allsubmit">一起提交</van-button>
</div>
</div>
</template>
<script>
export default {
data(){
return {
username: '',
password: '',
email:'',
phone:''
}
},
methods:{
allsubmit(){
console.log(121)
let vm=this
let oneFormPromise=new Promise((resolve,reject)=>{
vm.$refs.oneForm
.validate()
.then(()=>{
resolve()
})
.catch((err)=>{
if(err && err.length>0 && err[0].name){
vm.$refs.oneForm.scrollToField(err[0].name,false)
}
reject()
})
})
let twoFormPromise=new Promise((resolve,reject)=>{
vm.$refs.twoForm
.validate()
.then(()=>{
resolve()
})
.catch((err)=>{
if(err && err.length>0 && err[0].name){
vm.$refs.twoForm.scrollToField(err[0].name,false)
}
reject()
})
})
Promise.all([oneFormPromise,twoFormPromise])
.then(()=>{
})
.catch(()=>{
})
}
}
}
</script><template>
<div>
<van-form ref="oneform">
<van-field
:value="username"
name="username"
label="用户名"
required
placeholder="用户名"
:rules="[{ required: true,trigger:'onSubmit', message: '请填写用户名' }]"
/>
<van-field
:value="password"
type="password"
name="password"
required
label="密码"
placeholder="密码"
:rules="[{ required: true,trigger:'onSubmit', message: '请填写密码' }]"
/>
</van-form>
<van-form ref="twoform">
<van-field
:value="email"
required
name="email"
label="邮箱"
placeholder="邮箱"
:rules="[{ required: true,trigger:'onSubmit', message: '请填写邮箱' }]"
/>
<van-field
:value="phone"
name="phone"
required
label="手机号码"
placeholder="手机号码"
:rules="[{ required: true,trigger:'onSubmit', message: '请填写手机号码' }]"
/>
</van-form>
<div style="margin: 16px;">
<van-button round block type="primary" @click="allsubmit">一起提交</van-button>
</div>
</div>
</template>
<script>
export default {
data(){
return {
username: '',
password: '',
email:'',
phone:''
}
},
methods:{
allsubmit(){
console.log(121)
let vm=this
let oneFormPromise=new Promise((resolve,reject)=>{
vm.$refs.oneForm
.validate()
.then(()=>{
resolve()
})
.catch((err)=>{
if(err && err.length>0 && err[0].name){
vm.$refs.oneForm.scrollToField(err[0].name,false)
}
reject()
})
})
let twoFormPromise=new Promise((resolve,reject)=>{
vm.$refs.twoForm
.validate()
.then(()=>{
resolve()
})
.catch((err)=>{
if(err && err.length>0 && err[0].name){
vm.$refs.twoForm.scrollToField(err[0].name,false)
}
reject()
})
})
Promise.all([oneFormPromise,twoFormPromise])
.then(()=>{
})
.catch(()=>{
})
}
}
}
</script>
更多推荐
已为社区贡献3条内容
所有评论(0)