需求:有一个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
}
}
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' }
]
}
}
}