微信小程序form提交内容验证封装-手机号、内容为空、验证码倒计时

//common.js
// ---封装文件  复用-----
// 提交字段检验

class Check {
  constructor (){

  }

  content(txt,info){//内容

    if(txt==''){
      wx.showToast({
        title: info,
        icon: 'none',
        duration: 1000
      })
      return false;
    }else{
      return true;
    }
  }

  tel(tel,info){//电话
    let isMobile = /^(?:13\d|15\d|17\d|14\d|18\d|16\d|19\d)\d{5}(\d{3}|\*{3})$/; //手机号码验证规则
    let isPhone = /^((0\d{2,3}))(\d{7,8})(-(\d{3,}))?$/;   //座机验证规则

    if (!isMobile.test(tel) && !isPhone.test(tel)){
      wx.showToast({
        title: '电话格式错误',
        icon: 'none',
        duration: 1000
      })
       return false;
     }else{
       return true
     }
   
  }

  checkEmail(val){//邮箱
    let isEmail=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
    if(!isEmail.test(val)){
      wx.showToast({
        title: '邮箱格式错误',
        icon: 'none',
        duration: 1000
      })
       return false;
     }else{
       return true
     }

  }
  
  digit(numm,info){//数字

    if(numm=='' || numm==null || typeof parseInt(numm) != 'number'){
      wx.showToast({
        title: info,
        icon: 'none',
        duration: 1000
      })
       return false;
     }else{
       return true
     }
  }
  
   multSelect(arr,info){//多选&单选，筛查符合条件的数据，数据结构为数组对象
    let data = [];
    Object.entries(arr).filter(([key,val])=>{
          if(val.isShow){
            data.push(val);
          }
      })
      if(data.length>0){//选中的个数大于1
        // tjData.push(data);
        return data;
      }else{
        wx.showToast({
          title: `请选择${info}`,
          icon: 'none',
          duration: 1000
        })
        return false;
      }
  }
   yzm(code){//yzm
   
    let isNum = /^[0-9]{6}$/;
    if(!isNum.test(code)){
      wx.showToast({
        title: '验证码格式错误',
        icon: 'none',
        duration: 1000
      })
       return false;
     }else{
       return true
     }

  }



  countDown(vm){	//获取验证码倒计时效果
  //yzmtitle 固定名称
    //原理：通过把当前页面的this传递过去，修改当前页面的data
   
	let timerCountDown = null;
	    let timenum = 60;
	 return   timerCountDown = setInterval(function(){
	      timenum --;
	      if(timenum==0){
	        clearInterval(timerCountDown);
	        vm.setData({yzmtitle:'获取验证码',isYzm:false})
	        return
	      }
	      vm.setData({yzmtitle:`${timenum}s后重新获取`,isYzm:true})
	    },1000)
  
  


  }
  
  clearCountDown(){//清除计时器
    clearInterval(timerCountDown);
  }

}
const check = new Check({})

module.exports = check

// xx.html
 <input type="text"   placeholder="联系人姓名" maxlength="10" bindinput="onContentChange" data-type="uname" value="{{uname}}"/>
<button  class="{{isYzm?'yzm_countdown':''}}" bindtap="getYzm">{{yzmtitle}}button>

/*全局公用样式*/
.yzm_countdown{
font-size:30rpx !important;
color: #ccc !important;
font-weight: unset !important;
}

// xx.js

// pages/special/select/select.js

import check from '../../../utils/common.js'
Page({

  /**
   * 页面的初始数据
   */
  data: {
    uname:'',
    tel:'',
    yzm:'',
    content:'',

    yzmtitle:'获取验证码',//全局固定名称
    isYzm:false,全局固定名称  点击获取验证码更换样式
    iShowErr1:true,
    
	timer:null,//计时器唯一id
    

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },
    onClearModal(){//清除提交信息,计时器
    this.setData({
     	uname:'',
	    tel:'',
	    yzm:'',
	    content:'',
      	yzmtitle:'获取验证码'
    })
    clearInterval(this.data.timer);
  },

  goTop(){
    wx.pageScrollTo({ scrollTop: 0 })
  },

  onContentChange(e){
    let type = e.currentTarget.dataset.type;
    let val = e.detail.value;

    
    switch(type){
      case 'uname':
        this.setData({uname:val});
        break;
        case 'tel':
        this.setData({tel:val});
        break;
        case 'yzm':
        this.setData({yzm:val});
        break;
        case 'content':
        this.setData({content:val});
        break;
        
    }

  },

  getYzm(){
  	let vm = this;
    let tel = vm.data.tel;
   
    if(check.tel(tel,'请输入正确的电话号码')==false ) return false;
    
    let timer=  check.countDown(vm);
    this.setData({timer});
   
  },

  onSubmit(){//在提交时使用封装的公共类   
    let uname = this.data.uname;
    let tel = this.data.tel;
    let yzm = this.data.yzm;
    let con = this.data.content;

    if( check.content(uname,'请输入姓名')==false || check.tel(tel,'请输入正确的电话号码')==false || check.yzm(yzm,'请输入正确的验证码')==false || check.content(con,'请输入采购需求描述')==false  ) return false;
  
    // 进行后端请求，后端请求成功清除计时器
    clearInterval(this.data.timer);
    this.setData({timer:null})
    this.closeParamModal();
  },
  /**
   * 生命周期函数--监听页面隐藏
   * onHide()在小程序生命周期中具有监听小程序隐藏的功能，当切换页面和切换底部菜单栏时将会关闭定时器。
   */
  onHide() {//清除计时器
    clearInterval(this.data.timer);
    this.setData({timer:null})
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
    clearInterval(this.data.timer);
    this.setData({timer:null})
  },

  
})

尊重原创转载请注明出处谢谢！