form 校验多个表单-Toy模板网

这篇具有很好参考价值的文章主要介绍了form 校验多个表单。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

form 校验多个表单,前端,javascript,html

有的时候，表单需要拆开多个，这时候就需要校验多个表单

<template>
  <div>
    <div>表单1</div>
    <div class="top">
      <el-form :model="form" ref="form1" :rules="rules" label-width="100px" class="form">
        <el-form-item label="用户名称" prop="aaa">
          <el-input v-model="form.aaa"></el-input>
        </el-form-item>
        <el-form-item label="用户名称" prop="bbb">
          <el-input v-model="form.bbb"></el-input>
        </el-form-item>
        <el-form-item label="用户名称" prop="ccc">
          <el-input v-model="form.ccc"></el-input>
        </el-form-item>
      </el-form>
    </div>

    <div>表单2</div>
    <div class="bottom">
      <el-form :model="form" ref="form2" :rules="rules" label-width="100px" class="form">
        <el-form-item label="用户名称" prop="ddd">
          <el-input v-model="form.ddd"></el-input>
        </el-form-item>
        <el-form-item label="用户名称" prop="eee">
          <el-input v-model="form.eee"></el-input>
        </el-form-item>
        <el-form-item label="用户名称" prop="fff">
          <el-input v-model="form.fff"></el-input>
        </el-form-item>
        <el-button type="primary" @click="btn()">按钮</el-button>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      form: {},
      rules: {
        aaa: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        bbb: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        ccc: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        ddd: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        eee: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        fff: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ]
      },
    }
  },
  methods: {
    async btn () {
      let valid = false
      try {
        await Promise.all([this.$refs.form1.validate(), this.$refs.form2.validate()])
        valid = true
      } catch (error) {
        valid = false
      }

      if (valid) {
        console.log('通过')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.bottom {
  margin-top: 30px;
}
</style>

文章来源地址https://www.toymoban.com/news/detail-570659.html

到了这里，关于form 校验多个表单的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！