vue如何實現手機號碼校驗功能

這篇文章主要介紹vue如何實現手機號碼校驗功能，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

HTML視圖層代碼：

　　<div id="app">
  <input type="text" placeholder="請輸入手機號碼" v-model="val" @keyup="check"/>
  <div class="box" v-show="statu==true">您輸入的手機號碼格式正確</div>
 </div>

首先我們視圖層代碼是一個輸入框后面加上一個div作為提示信息，HTML代碼很簡單就不過多講解了；

JS數據邏輯層代碼：

 //這里我們要引入一個文件，文件里面是防抖函數的是實現
　　<script src="test.js"></script>
 <script>
 // 實例化 vue對象
  new Vue({
   el:"#app",
   data:{
　　　　　　　　//val是雙向數據綁定綁定輸入框的值
    val:"",
　　　　　　　　//此處狀態值是根據狀態值的變化來修改后面div的提示信息
    statu:false
   },
  mounted(){

  },
  methods:{
　　　　　　　　//check是我們綁定的輸入框的@keyup事件，注意這里不能是函數，不然不會觸發，必須要是對象
   check:debounce(function(){
　　　　　　　　　　//這里是我們調用方法，也就是我們要做的事情
    this.handle();
    console.log(new Date())
    }),
    handle(){
　　　　　　　　　　//此處輸入是為了統計handle事件觸發的次數
     console.log(“函數防抖”)；
     //這里定義校驗規則
     let reg = /^1[3|4|5|7|8][0-9]{9}$/; 
     //校驗手機號規則
　　　　　　　　　　　//如果校驗不通過會返回false，如果校驗通過會返回true
     if(reg.test(this.val)){
　　　　　　　　　　　　　　//修改狀態值方便上面的視圖層判斷展示
      this.statu=true;
　　　　　　　　　　　　　　//動態的修改提示信息
      document.getElementsByClassName("box").innerHTML="您輸入的手機號碼格式錯誤";
     }else{
      this.statu=false;
      document.getElementsByClassName("box").innerHTML="您輸入的手機號碼格式錯誤";
     }
    },
  }
 })

test.js

 function debounce(fn) { //默認300毫秒
  var timer;
  return function() {
   if(timer) {
    clearTimeout(timer);
   }
   timer = setTimeout(() => {
　　　　　　　　定時器必須要更改this指向，可以用apply、bind、或者上面用變量轉換等方式來進行更改this指向
　　
    fn.apply(this); // this 指向vue
   }, 1000);
  };
 }

最后，我們的效果圖如下（這里只是簡單的模擬效果，視圖層搭建的不是很美觀）：

我們可以看到我們打印的結果只輸出了一次，如果不使用防抖函數，這里是會觸發11次的，因為一共輸入了11個字符；假設我們的方法體中是發送ajax和操作DOM呢？為了一個手機號碼校驗，難道我們要進行11次甚至更多次的ajax請求或者DOM操作嗎？如果是那樣，我們的程序性能可想而知，所以說防抖函數是一種性能提升方案；

上述講述的是我們之前常見的cdn方式引入vue，那么我們如何在vue-cli腳手架中使用防抖函數來進行提升性能呢？

vue-cli：

首先我們可以在build文件夾中新建一個js文件，這里我們定義common.js：

common.js

// 函數防抖
export function debounce(fn, delay) {
 // 記錄上一次的延時器
 var timer = null;
 var delay = delay || 200;
 return function() {
 // var args = arguments;
  var that = this;
  // 清除上一次延時器
  clearTimeout(timer)
  timer = setTimeout(function() {
   fn.apply(that)
  }, delay);
 }
 }

注意：我們在vue-cli中自定義方法必須要export拋出，不然組件讀取不到

然后我們到我們需要用的文件中來進行引入和使用：

需要使用的組件：

import {debounce} from "../../build/common"

有拋出就一定有引入，我們這里用import來引用common.js文件里面的方法，這里的debounce就是我們用來接收common.js里面方法的變量；

調用方式跟上面的一樣：

這里的search是視圖層綁定的觸發事件，注意這里也需要是對象的形式來調用
methods:{
 Search:debounce(function(){console.log(1234);},1000), 
}

以上是“vue如何實現手機號碼校驗功能”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！