Elementui 多表单校验

最新推荐文章于 2024-04-20 08:59:00 发布

cuiyiran_

最新推荐文章于 2024-04-20 08:59:00 发布

阅读量1.3k

点赞数

文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/cuiyiran_/article/details/127302424

版权

HTML代码:

<el-form :model="formData1" :rules="formData1.rules" ref="formData1" class="sp-form">
    <el-form-item label="测试1:" prop="input1">
        <el-input @input="jizuGetResultHandle()" :disabled="disabled || laborState"             placeholder="" v-model="formData1.input1">
        </el-input>
    </el-form-item>
</el-form>

<el-form :model="formData2" :rules="formData2.rules" ref="formData2" class="sp-form">
    <el-form-item label="测试2:" prop="input2">
        <el-input @input="jizuGetResultHandle()" :disabled="disabled || laborState"             placeholder="" v-model="formData2.input2">
        </el-input>
    </el-form-item>
</el-form>

校验规则:

formData1: {
        rules: {
          input1: [
            {
              required: true,
              message: "请输入社会化员工人数",
              trigger: "blur",
            },
            {
              min: 1,
              max: 10,
              message: "长度在 1 到 10 个字符",
              trigger: "blur",
            },
          ],
        },
      },
formData2: {
        rules: {
          input2: : [
            {
              required: true,
              message: "请输入在册化员工人数",
              trigger: "blur",
            },
            {
              min: 1,
              max: 10,
              message: "长度在 1 到 10 个字符",
              trigger: "blur",
            },
          ],
        },
      },

表单提交验证方法:

saveHandle() {
      const formName = ["formData1", "formData2"];
      const validates = (item) => {
        return new Promise((resolve, reject) => {
          if (!this.$refs[item]) {
            resolve();
            return false;
          }
          this.$refs[item].validate((valid) => {
            if (valid) {
              resolve();
            } else {
              reject(new Error("验证不对"));
            }
          });
        });
      };
      Promise.all(formName.map((item) => validates(item)))
        .then(() => {
           //成功方法
        }
        .catch(() => {
           //失败方法
        });
    },