vue表单同时提交两个表单并验证

表单提交同时验证两个

    <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>