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

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

表单代码:

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 },
        ],
      }
    }
}
相关推荐
时间海8715 分钟前
对象键清洗之前,先拦住重名
javascript·后端
高级程序源40 分钟前
springboot荆州旅游推介平台24175-计算机课程设计、毕业设计
vue.js·spring boot·python·mysql·django·课程设计
挖掘狂人1 小时前
Java 26 深度解析:一次“性能兑现 + 契约收紧”的版本
javascript·后端·性能优化
霍营_托尼1 小时前
微信小程序点餐项目实战:飞入动画、样式错位、弹窗不消失,7 个前端坑的完整排障记录
javascript·微信小程序·动效
Hilaku2 小时前
为什么我劝应届生不要去创业公司写前端?
前端·javascript·程序员
高级程序源2 小时前
hive电商平台商品销售数据分析与趋势预测45659-计算机课程设计、毕业设计
vue.js·hive·spring boot·mysql·数据分析·django·课程设计
晓得迷路了3 小时前
栗子前端技术周刊第 149 期 - Vite+ 1.0、Preact 11、Next.js 16.4...
前端·javascript·react.js
前端一小卒3 小时前
搜索 API 额度用完返回空数组,Agent 就开始一本正经地胡说
前端·javascript·node.js
ljt27249606613 小时前
Vue笔记(十三)--mixin
vue.js·笔记
w2sfot3 小时前
AI时代,JS加密还有效吗?
开发语言·前端·javascript