两个form表单同时校验

@小花睡不好

已于 2023-04-18 15:35:35 修改

阅读量670

点赞数 2

分类专栏： vue+elementui 文章标签： elementui 前端

于 2023-04-18 15:25:03 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44553861/article/details/130222806

版权

vue+elementui 专栏收录该内容

18 篇文章

订阅专栏

该文章描述了一个需求，即在页面上存在两个表单，所有字段都需要填写。当点击确定按钮时，先对第一个表单（ruleForm）进行校验，如果通过，再对第二个表单（contractForm）进行校验。校验过程使用了Promise.all来同步处理两个表单的验证，只有当两个表单都验证成功后，才会执行表单提交操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求

效果图
要求：一个页面两个form，要求所有字段必填

代码

将表格上的rules改到点击确定按钮的时候去校验

<el-button type="primary" class="nb-primary-btn-style" round @click="validateEdit"
>确 定</el-button>

//提交编辑
validateEdit() {
	// 校验表单一
  let dispatchValidate = new Promise((resolve, reject) => {
    this.$refs.ruleForm.validate((valid) => {
      if (valid) {
        resolve();
      } else {
        return false;
      }
    });
  });
  let formValidate;
  if (this.titleName == 'add') {
    // 校验表单二
    formValidate = new Promise((resolve, reject) => {
    	this.$refs.contractForm.validate((valid) => {
      	if (valid) {
        	resolve();
        } else {
          return false;
        }
      });
    });
  }

  // Promise.all统一处理
  Promise.all([dispatchValidate, formValidate]).then(() => {
    // 后续表单提交操作
    this.submitEdit();
  });
},