输入ip地址，输入框超过三位直接跳到下一个

 

 场景：

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();
          });
        }
      }
    
    },
  },
};