el-form表单同时校验多组数据（姓名电话号码）（pattern写法）

前端小云儿

已于 2022-11-09 11:10:43 修改

阅读量1.5k

点赞数

分类专栏： elemenu-ui 文章标签： javascript 前端 servlet

于 2022-10-10 13:43:09 首次发布

本文链接：https://blog.csdn.net/jieweiwujie/article/details/127243023

版权

elemenu-ui 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

form表单多层数据结构校验以及form表单和table表格校验结合完整案例，超级详细，直接复制粘贴，拿来就用_无围之解的博客-CSDN博客form表单和table表格校验,多层数据结构https://blog.csdn.net/jieweiwujie/article/details/127240005?spm=1001.2014.3001.5501

el-form表单同时校验多组数据姓名电话号码

<template>
  <div class="content-el-form">
    <div style="margin-left: 0px">
      el-form表单同时校验多组数据
      <el-button type="primary" @click="clickFun()" size="mini">添加</el-button>
    </div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <div v-for="(item, index) in ruleForm.data" :key="index">
        <div
          style="
            display: flex;
            align-items: center;
            border: 1px solid #dedede;
            width: 600px;
            padding: 10px;
          "
        >
          <div>
            <el-form-item
              label="姓名"
              :prop="'data.' + index + '.name'"
              :rules="rules.name"
            >
              <el-input
                v-model="item.name"
                placeholder="请输入内容"
                size="mini"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="电话"
              :prop="'data.' + index + '.phone'"
              :rules="rules.phone"
            >
              <el-input
                size="mini"
                v-model="item.phone"
                placeholder="请输入内容"
              ></el-input>
            </el-form-item>
          </div>
          <div style="margin-left: 15px"></div>
        </div>
      </div>
      <el-form-item
        label="活动区域"
        prop="region"
        style="margin-top: 20px; margin-bottom: 20px"
      >
        <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item style="margin-top: 22px">
        <el-button type="primary" @click="submitForm('ruleForm')"
          >立即创建</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selectedList: [],
      ruleForm: {
        region: "",
        data: [{ name: "", phone: "" }],
      },
      rules: {
        name: [{ message: "请输入活动名称", required: true, trigger: "blur" }],
        phone: [{ message: "请输入电话", required: true, trigger: "blur" }],
        region: [{ required: true, message: "请选择", trigger: "change" }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    clickFun() {
      this.ruleForm.data.push({ name: "", phone: "" });
    },
  },
};
</script>
<style scoped lang="scss">
.content-el-form {
  margin-left: 12px;
  margin-top: 12px;
}
</style>

pattern写法

 rules: [{
            required: true,
            message: '请选择服务类型',
            trigger: "blur"
          },
          {
            min: 3,
            max: 5,
            message: "长度在 3 到 5 个字符",
            trigger: "blur"
          },
          {
            pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
            message: '请输入数字，保留2位小说',
          },
        ],
      },

下面是带表格的案例

form表单多层数据结构校验以及form表单和table表格校验结合完整案例，超级详细，直接复制粘贴，拿来就用_无围之解的博客-CSDN博客