?

?場景：

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