需求:有一个input输入框,里面可以输入多个ip地址,每个地址之间以逗号分隔,且输入的ip不能重复,为ip添加合法性校验.

    <el-form ref="form" :model="form" :rules="rules">
      <el-form-item label="ip" prop="ip">
        <el-input v-model="form.ip"></el-input>
      </el-form-item>
    </el-form>

computed: {
	rules() {
		return {
			ip: [
	          {
	            required: true,
	            trigger: 'blur',
	            validator: (rule, value, callback) => {
	              let regexp = /^((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}$/
	              let valdata = value.split(',')
	              let data = valdata[valdata.length - 1]
	              //格式是否符合要求
	              let isCorrect = true
	              //是否重复
	              let isRepeat = false
	              if (valdata.length) {
	                for (let i = 0; i < valdata.length; i++) {
	                  if (regexp.test(valdata[i]) === false) {
	                    isCorrect = false
	                  }
	                }
	                // 每次输入的会立即放在valdata数组中,在查找数组中是否已经存在该元素的时候需要排除自身
	                //即新加入数组的元素,所以循环到倒数第二个元素时停止
	                for (let i = 0; i < valdata.length - 1; i++) {
	                  if (valdata[i] === data) {
	                    isRepeat = true
	                  }
	                }
	              }
	              if (value === '') {
	                return callback(new Error('请输入iP地址'))
	              } else if (!isCorrect) {
	                callback(new Error('请输入正确的ip地址'))
	              } else if (isRepeat) {
	                callback(new Error('输入的ip地址不能重复'))
	              } else {
	                callback()
	              }
	            }
	          }, { min: 1, max: 64, message: this.$t('code.rule.4'), trigger: 'blur' }
	        ]
		}
	}
}