vue实现手机号码的校验实例代码（防抖函数的应用场景）

　　

  
  
您输入的手机号码格式正确
 

 //这里我们要引入一个文件，文件里面是防抖函数的是实现
　　
 
 // 实例化 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="您输入的手机号码格式错误";
     }
    },
  }
 })

 function debounce(fn) { //默认300毫秒
  var timer;
  return function() {
   if(timer) {
    clearTimeout(timer);
   }
   timer = setTimeout(() => {
　　　　　　　　定时器必须要更改this指向，可以用apply、bind、或者上面用变量转换等方式来进行更改this指向
　　
    fn.apply(this); // this 指向vue
   }, 1000);
  };
 }

// 函数防抖
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);
 }
 }

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

这里的search是视图层绑定的触发事件，注意这里也需要是对象的形式来调用
methods:{
 Search:debounce(function(){console.log(1234);},1000), 
}