京东商城商品数量正则判断(Vue2)

 需求：

获取输入框内的数据，进行正则判断并保存，点击加减进行加一减一操作

分析：

1.首先绑定输入框的value值，首先想到的是v-model,但是v-model是实时绑定，没办法在中间判断正则，所以只能通过v-bind单项绑定，再通过@change触发一个失焦后的函数，在函数中进行判断

//模板中

<input :value="num" @change="changeNum">



//data中

num="1"

2.写一个正则表达式，分析得对于数据验证有如下规则

        ① 是一个1-200的整数

        ② 填写负数显示为1

        ③ 填写小数向下取整

        ④大于200取200

        ⑤填写非数字显示之前的合法数字

正则表达式如下

        【注意】有一些多余的空格需要删掉，不然会出现错误。这里是方便看

//正则表达式
/^ ( [ 1-9 ] | [ 1-9] \d | [1-9] \d{2} | 200) $/

• ^ 表示匹配字符串的开头。
• [1-9] 匹配从1到9之间的任意一个数字。
• [1-9]\d 匹配以1到9之间的任意一个数字开头，后面跟着任意一个数字。
• 1\d{2} 匹配以1开头，后面跟着两个任意数字。
• 200 匹配数字200。
• | 表示逻辑或运算符，用于将不同的匹配条件组合起来。
• $ 表示匹配字符串的结尾。

        因此，整个正则表达式的含义是匹配从1到200的整数。注意，该表达式不会匹配包含前导               零的数字（例如"001"），也不会匹配更大的整数（例如"201"）或带有小数部分的数字。

3.函数中进行判断，完整整个规则

// 输入框数字改变
      changeNum(e){
        let value=parseInt(e.target.value)
        console.log(value)
        if(numReg.test(value)){
          this.num=value
        }
        else if(value>200){
          this.num=200
          // 强制更新视图，解决计算出来数字相同不触发重新渲染的问题
          e.target.value=200
        }
        else if(value<1){
          this.num=1
          e.target.value=1
        }
        else{
          e.target.value=this.num
        }
      }

【注意】这里需要考虑如果两次计算得出的num相同，不会触发视图的自动渲染，所以要手动强制渲染

        eg：第一次填写数据200，第二次填写数据201，201进入大于200的判断，这时计算出来的                  num还是200，视图不变化，所以显示的还是201

4.到此输入框的功能就实现了，再加上加减按钮的点击事件就完成了

//模板中
<input :value="num" @change="changeNum('input' ,$event)" autocomplete="off" class="itxt">
   <a href="javascript:" class="plus" @click="changeNum('incre',$event)">+</a>
   <a href="javascript:" class="mins" @click="changeNum('decre',$event)">-</a>

//函数中
// 输入框数字改变
    changeNum(type, e) {
      if (type === "input") {
        let value = parseInt(e.target.value)
        console.log(value)
        if (numReg.test(value)) {
          this.num = value
        }
        else if (value > 200) {
          this.num = 200
          // 强制更新视图，解决计算出来数字相同不触发重新渲染的问题
          e.target.value = 200
        }
        else if (value < 1) {
          this.num = 1
          e.target.value = 1
        }
        else {
          e.target.value = this.num
        }
      }
      else if(type === "incre"){
        if(this.num<200){
          this.num++
        }
      }
      else if(type === "decre"){
        if(this.num>1){
          this.num--
        }
      }
    }