html代码
<el-form-item label="IP地址" :required="true">
<section v-for="(item, index) in addForm.nginx" :key="index">
<section style="padding-bottom: 34px;">
<el-col :span="12">
<el-form-item :prop="'nginx.'+index+'.ip'" :rules="addRules.ip" >
<el-input clearable v-model="item.ip" maxlength="15" placeholder="IP" ></el-input>
</el-form-item>
</el-col>
<el-col :span="9">
<el-form-item :prop="'nginx.'+index+'.port'" :rules="addRules.port">
<el-input v-model="item.port" maxlength="5" placeholder="端口"></el-input>
</el-form-item>
</el-col>
</section>
</section>
</el-form-item>
js–rules校验
addRules: {
ip:[
{required: true, message: '不能为空', trigger: 'blur'},
{pattern:/((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))/,message: 'ip地址不正确', trigger: 'blur' },
{validator: (rule, value, callback) => {
let arrList = data.addForm.nginx
if(arrList.length > 1){
let val1 = arrList[0].ip;
let val2 = arrList[1].ip;
if(val1 == val2){
callback(new Error('两次输入的IP重复!'))
}
}
}
}
],
port:[{required: true, message: '不能为空', trigger: 'blur'},
{pattern:/^([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-4]\d{4}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/ , message:'格式:0-65535!'}],
}