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

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

表单代码:

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 },
        ],
      }
    }
}
相关推荐
Odoo老杨4 分钟前
Odoo 免费开源 ERP:通过 JavaScript 创建对话框窗口的技术实践分享
javascript·odoo·数字化转型·erp·企业信息化
一个处女座的程序猿O(∩_∩)O36 分钟前
完成第一个 Vue3.2 项目后,这是我的技术总结
前端·vue.js
逆旅行天涯43 分钟前
【Threejs】从零开始(六)--GUI调试开发3D效果
前端·javascript·3d
长风清留扬1 小时前
小程序毕业设计-音乐播放器+源码(可播放)下载即用
javascript·小程序·毕业设计·课程设计·毕设·音乐播放器
m0_748247802 小时前
Flutter Intl包使用指南:实现国际化和本地化
前端·javascript·flutter
ZJ_.2 小时前
WPSJS:让 WPS 办公与 JavaScript 完美联动
开发语言·前端·javascript·vscode·ecmascript·wps
GIS开发特训营2 小时前
Vue零基础教程|从前端框架到GIS开发系列课程(七)响应式系统介绍
前端·vue.js·前端框架·gis开发·webgis·三维gis
Cachel wood3 小时前
python round四舍五入和decimal库精确四舍五入
java·linux·前端·数据库·vue.js·python·前端框架
joan_853 小时前
layui表格templet图片渲染--模板字符串和字符串拼接
前端·javascript·layui
还是大剑师兰特3 小时前
什么是尾调用,使用尾调用有什么好处?
javascript·大剑师·尾调用