微信小程序表单验证WxValidate的使用


Posted in Javascript onNovember 27, 2019

效果图GIF

微信小程序表单验证WxValidate的使用

git地址:WxValidate

使用

import WxValidate from '../../utils/WxValidate';
Page({
  data: {
    basicInfo: {
      tel: '',
      post: '',
      weChat: '',
      specialPlane: '',
      email: '',
      intro: ''
    }
  },
  onLoad() {
    this.initValidate();
  },
  initValidate() {
    const rules = {
      tel: {
        required: true,
        tel: true,
      }, post: {
        required: true,
      }, weChat: {
        required: true,
      }, specialPlane: {
        required: true,
      }, email: {
        required: true,
        email: true
      }
    };
    const messages = {
      tel: {
        required: '请输入手机号',
        tel: '请输入正确格式手机号',
      }, post: {
        required: '请输入职位',
      }, weChat: {
        required: '请输入微信号',
      }, specialPlane: {
        required: '请输入座机号',
      }, email: {
        required: '请输入电子邮箱',
        email: '请输入正确格式电子邮箱',
      }
    };
    this.WxValidate = new WxValidate(rules, messages)
  },
  formChange(val) {
    let obj = {}
    obj[`basicInfo.${val.currentTarget.dataset.val}`]= val.detail.value
    this.setData(obj)
  },
  submitForm(e) {
    const params = e.detail.value
    if (!this.WxValidate.checkForm(params)) {
      const error = this.WxValidate.errorList[0]
      this.showModal(error)
      return false
    }
  },
  showModal(error) {
    wx.showToast({
      title: error.msg,
      icon: 'none',
      duration: 2000
     })
  },
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中使用正则匹配多条,且获取每条中的分组数据
Nov 30 Javascript
jquery事件preventDefault()方法用法实例
Jan 16 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
Jan 24 Javascript
JS建造者模式基本用法实例分析
Jun 30 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
Mar 07 Javascript
js返回顶部实例分享
Dec 21 Javascript
javascript显示系统当前时间代码
Dec 29 Javascript
解析Vue2 dist 目录下各个文件的区别
Nov 22 Javascript
深入理解react 组件类型及使用场景
Mar 07 Javascript
JS实现简单的文字无缝上下滚动功能示例
Jun 22 Javascript
JavaScript适配器模式原理与用法实例详解
Mar 09 Javascript
在vue中嵌入外部网站的实现
Nov 13 Javascript
vue(2.x,3.0)配置跨域代理
Nov 27 #Javascript
微信小程序加载机制及运行机制图解
Nov 27 #Javascript
webgl实现物体描边效果的方法介绍
Nov 27 #Javascript
three.js利用卷积法如何实现物体描边效果
Nov 27 #Javascript
Angular8引入百度Echarts进行图表分析的实现代码
Nov 27 #Javascript
vue实现浏览器全屏展示功能
Nov 27 #Javascript
js中apply和call的理解与使用方法
Nov 27 #Javascript
You might like
php实现单链表的实例代码
2013/03/22 PHP
php字符比较函数similar_text、strnatcmp与strcasecmp用法分析
2014/11/18 PHP
thinkPHP实现瀑布流的方法
2014/11/29 PHP
win10环境PHP 7 安装配置【教程】
2016/05/09 PHP
PHP5.4起内置web服务器使用方法
2016/08/09 PHP
Laravel学习教程之request validation的编写
2017/10/25 PHP
JavaScript学习笔记(十七)js 优化
2010/02/04 Javascript
Jquery下attr和removeAttr的使用方法
2010/12/28 Javascript
Safari5中alert的无限循环BUG
2011/04/07 Javascript
JavaScript实现自己的DOM选择器原理及代码
2013/03/04 Javascript
jquery实现保存已选用户
2014/07/21 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
2014/08/08 Javascript
JS实现的网页倒计时数字时钟效果
2015/03/02 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
2015/09/06 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
2016/04/17 Javascript
jQuery滚动监听实现商城楼梯式导航效果
2017/03/06 Javascript
Vue组件的使用及个人理解与介绍
2019/02/09 Javascript
vue基于viewer实现的图片查看器功能
2019/04/12 Javascript
详解js根据百度地图提供经纬度计算两点距离
2019/05/13 Javascript
详解JavaScript中精度失准问题及解决方法
2020/02/04 Javascript
如何在JavaScript中使用localStorage详情
2021/02/04 Javascript
Python基于OpenCV实现视频的人脸检测
2018/01/23 Python
PyQt5主窗口动态加载Widget实例代码
2018/02/07 Python
python微信跳一跳系列之自动计算跳一跳距离
2018/02/26 Python
Python Numpy:找到list中的np.nan值方法
2018/10/30 Python
pd.DataFrame统计各列数值多少的实例
2019/12/05 Python
Python实现剪刀石头布小游戏(与电脑对战)
2019/12/31 Python
使用python无账号无限制获取企查查信息的实例代码
2020/04/17 Python
List、Map、Set三个接口,存取元素时,各有什么特点?
2015/09/27 面试题
this关键字的含义
2015/04/08 面试题
群众路线教育实践活动实施方案
2014/10/31 职场文书
2014年保育员工作总结
2014/12/02 职场文书
企业办公室主任岗位职责
2015/04/01 职场文书
预备党员介绍人意见
2015/06/01 职场文书
详解Java实现数据结构之并查集
2021/06/23 Java/Android
MySQL系列之八 MySQL服务器变量
2021/07/02 MySQL