web 机动车车牌录入组件

1. html  使用的是element ，from  因为我使用的是多个车牌录入，所以是双重循环，单个可以把index 相关的删掉

<el-form-item

                label="车牌号码"

                :rules="[

                  {

                    required: true,

                    message: '请输入车牌号码',

                    trigger: 'blur',

                  }

                ]"

              >

                <div class="jdc-box" :id="'jdc' + index">

                  <el-input

                    v-for="(i, k) in item.jdccphm"

                    :key="k"

                    v-model="i.num"

                    placeholder=""

                    maxlength="1"

                    :class="'jdcInput' + index + k"

                    @input="jdcCphmChange($event, index, k)"

                    @keyup.native.delete="jdcDel(index,k)"

                  >

                  </el-input>

                  <div class="el-form-item__error">{{item.errorMeg}}</div>

                </div>

              </el-form-item>

2.

clxqList: [

          {

            cphm: "", //车牌号码

            jdccphm: [

              { num: "" },

              { num: "" },

              { num: "" },

              { num: "" },

              { num: "" },

              { num: "" },

            ],

            errorMeg:'',

          },

3.

// 机动车车牌号码 input事件

    jdcCphmChange(val, index, k) {

      let arr = this.addClForm.clxqList[index].jdccphm;

      if(val){

          this.addClForm.clxqList[index].cphm += arr[k].num;

          console.log(this.addClForm.clxqList[index].cphm,'qqqqq')

        if (k < 5&&0 <= k) {

          // 下一input聚焦

          let dom = document.getElementsByClassName(

            "jdcInput" + index + (k + 1)

          )[0].children[0];

          dom.focus();

        } else {

          if(this.addClForm.clxqList[index].cphm.length>=6){

            var regu =/^([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{3,}[A-Z0-9挂学警港澳]{1})$/; //这里的校验可以根据项目需求自行更改

            var re = new RegExp(regu);

            let cphm = this.addClForm.clxqList[index].cphm;

            if (re.test(cphm)) {

              // 通过校验清空报错

                  this.addClForm.clxqList[index].errorMeg = ''

                  return true;

                }else{

                  this.addClForm.clxqList[index].errorMeg = '车牌号格式错误（字母必须大写）'

                  return false;

                }

            }

        }

      }else {

        // 如果没值 删除当前k对应的索引下标

        let arr = this.addClForm.clxqList[index].cphm.split("");

        arr.splice(k,1);

        this.addClForm.clxqList[index].cphm = arr.join("");

        if (k < 6&&0 < k) {

          // 前一input聚焦

          let dom = document.getElementsByClassName(

            "jdcInput" + index + (k - 1)

          )[0].children[0];

          dom.focus();

        } else {

          return

        }

      }

     

    },

// 机动车车牌号码 delete

    jdcDel(index, k){

      let arr = this.addClForm.clxqList[index].jdccphm;

      // 如果当前删除的框已为空，那么聚焦到前面一个框

      if(!arr[k].num){

        if(k>=1){

          // 前一input聚焦

          let dom = document.getElementsByClassName(

            "jdcInput" + index + (k - 1)

          )[0].children[0];

          dom.focus();

        }

      }