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

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

表单代码:

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 },
        ],
      }
    }
}
相关推荐
ZHOU_WUYI13 分钟前
用react实现一个简单的三页应用
前端·javascript·react.js
samroom1 小时前
Vue项目---懒加载的应用
前端·javascript·vue.js·性能优化
苹果酱05671 小时前
[数据库之十一] 数据库索引之联合索引
java·vue.js·spring boot·mysql·课程设计
geovindu2 小时前
vue3: pdf.js5.2.133 using typescript
javascript·vue.js·typescript·pdf
whatever who cares2 小时前
React 中 useMemo 和 useEffect 的区别(计算与监听方面)
前端·javascript·react.js
2501_915373882 小时前
打造一个 Markdown 编辑器:Electron 项目实战教程
javascript·electron·编辑器
t_hj2 小时前
Ajax的原理和解析
前端·javascript·ajax
小白上线*^_^*3 小时前
Vue——Axios
前端·javascript·vue.js
sunbyte4 小时前
Three.js + React 实战系列 - 客户评价区细解教程 Clients 组件✨(回答式评价 + 评分星级)
开发语言·javascript·react.js
marvindev4 小时前
提bug测试专用
开发语言·javascript·bug