表单验证:输入的字符串以回车分隔并验证是否有

公司项目开发时,有一个需求,需要对输入的字符串按回车分隔并验证是否有重复项,效果如下:

表单代码:

html 复制代码
  <el-form-item label="IP地址条目:" prop="ipAddressEntry">
      <el-input
          type="textarea"
          v-model="formData.ipAddressEntry"
          :rows="5"
      ></el-input>
  </el-form-item>

表单验证代码:

javascript 复制代码
 data() {
    let isRepeat = (rule, value, callback) => {
      if (this.formData.ipAddressEntry != ''){
        const arr = this.formData.ipAddressEntry.split('\n');
        const set = new Set(arr);

        if (arr.length === set.size) {
          callback()
        } else {
          callback('输入IP地址重复')
        }
      }
    }
    return{
      rules: {
        ipAddressEntry: [
          {
            required: true,
            message: '请填写',
            trigger: 'blur',
          },
          { trigger: 'blur', validator: isRepeat },
        ],
      }
    }
}
相关推荐
wjs040642 分钟前
用css实现一个类似于elementUI中Loading组件有缺口的加载圆环
前端·css·elementui·css实现loading圆环
qq_544329171 小时前
下载一个项目到跑通的大致过程是什么?
javascript·学习·bug
林涧泣2 小时前
【Uniapp-Vue3】下拉刷新
前端·vue.js·uni-app
Jane - UTS 数据传输系统4 小时前
VUE+ Element-plus , el-tree 修改默认左侧三角图标,并使没有子级的那一项不展示图标
javascript·vue.js·elementui
ThomasChan1236 小时前
Typescript 多个泛型参数详细解读
前端·javascript·vue.js·typescript·vue·reactjs·js
zzlyx996 小时前
.NET 9 微软官方推荐使用 Scalar 替代传统的 Swagger
javascript·microsoft·.net
Bunury6 小时前
组件封装-List
javascript·数据结构·list
我命由我123456 小时前
NPM 与 Node.js 版本兼容问题:npm warn cli npm does not support Node.js
前端·javascript·前端框架·npm·node.js·html5·js
Orange3015117 小时前
【自己动手开发Webpack插件:开启前端构建工具的个性化定制之旅】
前端·javascript·webpack·typescript·node.js
计算机学姐7 小时前
基于微信小程序的民宿预订管理系统
java·vue.js·spring boot·后端·mysql·微信小程序·小程序