微信小程序常用表单校验方法(手机号校验、身份证号(严格和非严格校验、验证码六位数字校验))

时间:2024-02-20 22:04:38

util.js

function isPhone(value) {
  if (!/^1(3|4|5|7|8)\d{9}$/.test(value)) {
    return false
  } else {
     return true
  }
}

//验证码六位数校验
function isSixNum(value) {
  if (!/^\d{6}$/.test(value)) {
    return false
  } else {
    return true
  }
}

//身份证号不严格校验
function isCard(value) {
  if (!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
    return false
  } else {
    return true
  }
}

//身份证号严格校验
function IdentityIDCard (code) {
  //身份证号前两位代表区域
  var city = {
    11: "北京", 12: "天津", 13: "河北", 14: "山西", 15: "内蒙古",
    21: "辽宁", 22: "吉林", 23: "黑龙江 ",
    31: "上海", 32: "江苏", 33: "浙江", 34: "安徽", 35: "福建", 36: "江西", 37: "山东",
    41: "河南", 42: "湖北 ", 43: "湖南", 44: "广东", 45: "广西", 46: "海南",
    50: "重庆", 51: "四川", 52: "贵州", 53: "云南", 54: "* ",
    61: "陕西", 62: "甘肃", 63: "青海", 64: "宁夏", 65: "*",
    71: "*",
    81: "香港", 82: "澳门",
    91: "国外 "
  };
  //身份证格式正则表达式
  var idCardReg = /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i;
  var errorMess = "";//错误提示信息
  var isPass = true;//身份证验证是否通过(true通过、false未通过)

  //如果身份证不满足格式正则表达式
  if (!code || !idCardReg.test(code)) {
    errorMess = "您输入的身份证号格式有误!";
    isPass = false;
  }

  //区域数组中不包含需验证的身份证前两位
  else if (!city[code.substr(0, 2)]) {
    errorMess = "您输入的身份证地址编码有误!";
    isPass = false;
  }
  else {
    //18位身份证需要验证最后一位校验位
    if (code.length == 18) {
      code = code.split(\'\');
      //∑(ai×Wi)(mod 11)
      //加权因子
      var factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
      //校验位
      var parity = [1, 0, \'X\', 9, 8, 7, 6, 5, 4, 3, 2];
      var sum = 0;
      var ai = 0;
      var wi = 0;
      for (var i = 0; i < 17; i++) {
        ai = code[i];
        wi = factor[i];
        sum += ai * wi;
      }
      var last = parity[sum % 11];
      if (parity[sum % 11] != code[17]) {
        errorMess = "您输入的身份证号不存在!";
        isPass = false;
      }
    }
  }
  var returnParam = {
    \'errorMess\': errorMess,
    \'isPass\': isPass
  }
  return returnParam;
} 



//对外导出方法
module.exports = {
  isPhone: isPhone,
  isSixNum: isSixNum
  isCard: isCard,
  IdentityIDCard: IdentityIDCard 
}

  index.js

import untils from \'../../utils/util.js\' //相对地址

data(){
	return{
		isPhoneFlag: true, // 联系方式手机号状态
    	isSixFlag: true, // 联系方式手机号状态
    	isCardFlag: true, // 身份证状态
    	isManagerTel: true, // 经理联系方式状态
   }
},
bindChange(e) {
    if (e.target.dataset.key){
      if (e.target.dataset.key == \'formOne.tele\') {
        this.setData({
          isPhoneFlag: untils.isPhone(e.detail.value)
        })
        if (!this.data.isPhoneFlag) {
          wx.showToast({
            title: \'联系方式格式有误\',
            icon: \'none\',
            duration: 2000,
          })
        }
      } 
      if (e.target.dataset.key == \'formOne.uniqueCode\') {
        this.setData({
          isSixFlag: untils.isSixNum(e.detail.value)
        })
        if (!this.data.isSixFlag) {
          wx.showToast({
            title: \'请输入六位验证码\',
            icon: \'none\',
            duration: 2000,
          })
        }
      } 
      if (e.target.dataset.key == \'formOne.idcard\') {
        this.setData({
          isCardFlag: untils.IdentityIDCard(e.detail.value)
        })
        //console.log(this.data.isCardFlag.isPass)
        if (!this.data.isCardFlag.isPass) {
          wx.showToast({
            title: this.data.isCardFlag.errorMess,
            icon: \'none\',
            duration: 2000,
          })
        }
      } 
      if (e.target.dataset.key == \'formTwo.managerTel\') {
        this.setData({
          isManagerTel: untils.isPhone(e.detail.value)
        })
        if (!this.data.isManagerTel) {
          wx.showToast({
            title: \'经理联系方式格式有误\',
            icon: \'none\',
            duration: 2000,
          })
        }
      } 
    }
    this.setData({
      [e.target.dataset.key]: e.detail.value
    })
  }

  index.wxml 写一个就行,数据绑定事件绑定同理

<view class="section">
     <view class="section__title require">联系方式:</view>
     <input type="number" name="tele" data-key="formOne.tele" bindblur="isPhone"  bindchange="bindChange" value="{{formOne.tele}}" />
 </view>