场景:
1.选择ip地址或域名,选择其中一个,另一个不可填写;
2.ip地址,第一个输入框不能为0;最后一个不能为255;
3.ip地址每个输入框不能超过三位数字,不能为字母;
4.输入框足3位后,自动聚焦下一个输入框;
5.自定义error样式;
解决:
1.用el-radio选择,通过disable属性控制是否可填写;
2.通过给第一个和最后一个输入框添加blur事件,分别判断不能为0 ,255的情况,还要考虑二者都填,其中一个不符合条件的情况
3.输入框不能超过三位,给el-input添加属性maxlength='3' ; 不能为字母,
首先设置v-model.number='value',再添加onkeyup事件,通过正则不允许输入字母;
<el-input v-model.number="ip1" onkeyup="value=value.replace(/[^\d]/g,'')" class="ipinput" maxlength='3' :disabled='radioDisable' ></el-input>
4.给每个el-input添加@input事件,如果输入的长度等于3,下一个输入框聚焦;
if (v.toString().length === 3) {
this.$nextTick(() => {
this.$refs.ip2.focus();
});
}
5.自定义error,通过span slot='error'设置样式;本文未使用el-form的rules;
<el-radio-group v-model="radio" class="radioform" @change="handleChangeRadio">
<el-radio label="1" class="radio flex_column">
<span class="label">IP地址:</span>
<el-input v-model.number="ip1" onkeyup="value=value.replace(/[^\d]/g,'')" class="ipinput" maxlength='3' ref='ip1' :disabled='radioDisable' @blur="handleInputBlur(0)" @input="handleInpIp(1,ip1)"></el-input><span class="dot">.</span>
<el-input v-model.number="ip2" onkeyup="value=value.replace(/[^\d]/g,'')" class="ipinput" maxlength='3' ref='ip2' :disabled='radioDisable' @input="handleInpIp(2,ip2)"></el-input><span class="dot">.</span>
<el-input v-model.number="ip3" onkeyup="value=value.replace(/[^\d]/g,'')" class="ipinput" maxlength='3' ref='ip3' :disabled='radioDisable' @input="handleInpIp(3,ip3)"></el-input><span class="dot">.</span>
<el-input v-model.number="ip4" onkeyup="value=value.replace(/[^\d]/g,'')" class="ipinput" maxlength='3' ref='ip4' :disabled='radioDisable' @blur="handleInputBlur(255)" @input="handleInpIp(4,ip4)"></el-input>
<span class="item-error" v-show="isRight1">
<img src="@/assets/images1/errortip.png" /><span>{{error1}}</span>
</span>
</el-radio>
<el-radio label="2" class="radio">
<span class="label">域名:</span>
<el-input v-model.number="domain" class="setpwd" placeholder="http://" :disabled='!radioDisable' @input="handleOnlyNumber">
</el-input>
<span class="item-error" v-show="isRight2">
<img src="@/assets/images1/errortip.png" /><span>{{error2}}</span>
</span>
</el-radio>
</el-radio-group>
<el-button class="active_btns active_btns_short" @click="handleConfirm">确定</el-button>
data() {
return {
ip1: "",
ip2: "",
ip3: "",
ip4: "",
domain: "",
radio: "1",
radioDisable: false,
isRight1: false,
error1: "",
isRight2: false,
error2: "",
};
},
mounted() {},
methods: {
handleChangeRadio(item) {
// console.log(item, "item");
this.isRight2 = false;
this.isRight1 = false;
if (item == "1") {
this.radioDisable = false;
} else if (item == "2") {
this.radioDisable = true;
}
},
handleConfirm() {
// this.$message.error('连接失败,请检查输入信息后重试')
if (this.radio == "1") {
//ip
if (
!(
String(this.ip1) &&
String(this.ip2) &&
String(this.ip3) &&
String(this.ip4)
)
) {
this.isRight1 = true;
this.error1 = "请输入ip地址";
} else {
if (this.ip1 == "0" || this.ip4 == "255") {
this.error1 = "ip地址输入不合规矩";
this.isRight1 = true;
} else {
this.isRight1 = false;
this.$router.push({
path:'/essentialInformation'
})
}
}
} else if (this.radio == "2") {
//domain
if (!this.domain) {
this.isRight2 = true;
this.error2 = "请输入域名";
} else {
this.isRight2 = false;
this.$router.push({
path:'/essentialInformation'
})
}
}
},
handleOnlyNumber() {
// this.domain = this.domain.replace(/[^d]/g,'');
},
handleInputBlur(v) {
if (v == 0) {
//第一个
if (this.ip1 == "0" || this.ip4 == "255") {
this.error1 = "ip地址输入不合规矩";
this.isRight1 = true;
} else {
this.isRight1 = false;
}
} else if (v == 255) {
if (this.ip1 == "0" || this.ip4 == "255") {
// console.log('00')
this.error1 = "ip地址输入不合规矩";
this.isRight1 = true;
} else {
this.isRight1 = false;
}
}
},
handleInpIp(i, v) {
// v=v.replace(/^\.+|[^\d.]/g,'')
if (i == 1) {
if (v.toString().length === 3) {
this.$nextTick(() => {
this.$refs.ip2.focus();
});
}
} else if (i == 2) {
if (v.toString().length === 3) {
this.$nextTick(() => {
this.$refs.ip3.focus();
});
}
} else if (i == 3) {
if (v.toString().length === 3) {
this.$nextTick(() => {
this.$refs.ip4.focus();
});
}
}
},
},
};