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>

  

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

  1. 微信小程序-form表单-获取用户输入文本框的值

    微信小程序-form表单-获取用户输入文本框的值 <input name='formnickname' class="textarea" placeholder=" ...

  2. 微信小程序之表单验证

    表单验证 何为表单验证呢? 百度百科给出的回答是这样的: 表单验证是javascript中的高级选项之一.JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证 [ ...

  3. 微信小程序_(表单组件)checkbox与label

    微信小程序组件checkbox官方文档 传送门 微信小程序组件label官方文档 传送门 Learn 一.checkbox组件 二.label组件与checkbox组件共用 一.checkbox组件 ...

  4. 微信小程序_(表单组件)button组件的使用

    微信小程序表单组件button官方文档 传送门 Learn 一.button组件的使用 一.button组件的使用 size:按钮的大小[默认值default] type:按钮的样式类型[默认值def ...

  5. 微信小程序之表单提交

    页面绑定很多事件! <view class="content"> <view class="user personal_func_list"& ...

  6. 2017-01-11小程序form表单提交

    小程序form表单提交 1.小程序相对于之前的WEB+PHP建站来说,个人理解为只是将web放到了微信端,用小程序固定的格式前前端进行布局.事件触发和数据的输送和读取,服务器端可以用任何后端语言写,但 ...

  7. 微信小程序常用样式汇总

    本文系转载: 原文作者:chenzheng8975 原文地址:https://www.cnblogs.com/chenzheng8975/p/9605186.html 微信小程序常用样式汇总 小程序特 ...

  8. 微信小程序 传值取值的方法总结

    微信小程序 传值取值的几种方法总结 列表index下标取值 页面传值 form表单取值 1. 列表index下标取值 实现方式是:data-index="{{index}}"挖坑及 ...

  9. 微信小程序调接口常见问题解决方法

    第一次调接口时遇见的bug. 注意:接口的域名不能使用 IP 地址或 localhost,且不能带端口号: 微信小程序如何调接口? wx.request({ url: 'http://miniapp/ ...

随机推荐

  1. tensorflow源码解析之framework-op

    目录 什么是op op_def定义 op注册 op构建与注册辅助结构 op重写 关系图 涉及的文件 迭代记录 1. 什么是op op和kernel是TF框架中最重要的两个概念,如果一定要做一个类比的话 ...

  2. 输入URL到页面加载过程

    URL(uniform resource location) : 统一资源定位符,用来作为互联网上各种资源的标识符,可理解为身份证号 . 注意点:浏览器为了保证安全性,设定了跨域保护策略, 即窗口之间 ...

  3. 自己动手写Vector【Cherno C++教程】

    动手写一个Vector 本文是对<最好的C++教程>的动手写数据结构部分的一个整理,主要包含91p动手写Array数组和92p动手写Vector数组的内容. 自己动手来写这些数据结构是学习 ...

  4. docker学习笔记(3)- 镜像

    简介 在docker学习笔记(1)- 架构概述一节中可以看到镜像是docker三大组件之一,可以将Docker镜像类比为虚拟机的模版. 镜像由多个层组成,每层叠加之后从外部看就像一个独立的对象,镜像的 ...

  5. python关于openpyxl库的常用使用介绍

    from openpyxl import load_workbook #只能加载已存在的表格 wb=load_workbook("D:\zhijing_work\测试数据\测试文件\yeta ...

  6. 关于二维DP————站上巨人的肩膀

    意匠惨淡经营中ing, 语不惊人死不休........ 前几天学了DP,做了个简单的整理,记录了关于DP的一些概念之类的,今天记录一下刚学的一个类型 ----关于二维DP 那建立二维数组主要是干嘛用的 ...

  7. 在基于ABP框架的前端项目Vue&Element项目中采用电子签名的处理

    在前面随笔介绍了<在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理>的处理,有的时候,我们在流程中或者一些文件签署的时候,需要签上自己的大名,一 ...

  8. 配置阿里云RepoForge 镜像

    镜像下载.域名解析.时间同步请点击阿里云开源镜像站 一.RepoForge 镜像介绍 Repoforge 是 RHEL 系统下的软件仓库,拥有 10000 多个软件包,被认为是最安全.最稳定的一个软件 ...

  9. CLion入门教程

    1. 说点什么 以下我将介绍地表最强(可能是之一,别打我) C/C++ 开发 IDE--CLion,以及如何使用它来快乐刷题. 工欲善其事,必先利其器.一个好的编程工具对写代码或是做题来说格外重要,尤 ...

  10. LCS&&LRC&&LIS问题

    注:最近笔试题经常碰到DP动态规划的问题,但是由于本人没有接触过DP,笔试后看到别人家的答案简洁又漂亮,真的羡慕:难的DP自己可能不会,那再见到常见的LCS和LRS以及LIS为问题总该会吧: 资料参考 ...