动态增删el-input并且单独给每个el-input添加校验信息

最新推荐文章于 2025-05-09 13:20:55 发布

软件测试小菜鸟正在更新中

最新推荐文章于 2025-05-09 13:20:55 发布

阅读量2.5k

点赞数 1

分类专栏： vue element ui 文章标签： vue.js elementui javascript

本文链接：https://blog.youkuaiyun.com/weixin_43258184/article/details/125168556

版权

vue 同时被 2 个专栏收录

32 篇文章

订阅专栏

element ui

32 篇文章

订阅专栏

本文介绍如何在Vue.js项目中使用ElementUI动态创建el-input组件，并为每个输入框添加单独的验证规则。通过el-form和el-form-item结合，实现增删输入框并进行有效校验。

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

在这里插入图片描述
大致做成这种样子的。

主要思路：用el-form中的el-form-item的rule做校验。每个el-form-item标签下一个el-input,动态增删el-form-item标签。

标签部分：

   <el-row>
        <el-form ref="dataForm" :model="emailList" :inline="true" label-position="top" :rules="rules">
          <el-col v-for="(item, index) in emailList.emailArry" :key="index" :span="4">
            <el-form-item :prop="`emailArry.${index}.emailItem`" :rules="rules.emailRules" style="display:flex;height:0.3rem">
              <el-input v-model="item.emailItem" placeholder="输入邮箱" size="mini" style="width:70%" />
              <el-button size="mini" type="danger" style="margin-left:0.2rem" @click="delEmail(index)">删除</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>

js部分：

<script>
export default {
  data() {
    const validatorEmails = (rule, value, callback) => {
      var email = value.replace(/\s*/g, ''); // 去除字符串内所有空格
      var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
      if (email === '') {
        callback(new Error(`${email} 邮箱不能为空！`));
      } else if (!reg.test(email)) {
        callback(new Error(`${email} 邮箱格式不正确，请重新输入！`));
      } else {
        callback();
      }
    };
    return {
      emailList: {
        emailArry: [{ emailItem: '' }]
      },
      rules: {
        emailRules: [{ required: true, trigger: 'blur', validator: validatorEmails }]
      }
    };
  },
  methods: {}
};
</script>