微信小程序表单验证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代码
Mar 27 Javascript
DOM 脚本编程中的兄弟节点
Oct 31 Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
Mar 21 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
Dec 12 Javascript
Node.js 的异步 IO 性能探讨
Oct 08 Javascript
跟我学习javascript的for循环和for...in循环
Nov 18 Javascript
在 Express 中使用模板引擎
Dec 10 Javascript
前端分页功能的实现以及原理(jQuery)
Jan 22 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
Sep 28 Javascript
浅谈vue项目打包优化策略
Sep 29 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
Apr 04 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
Apr 09 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
php4的session功能评述(二)
2006/10/09 PHP
WampServer下安装多个版本的PHP、mysql、apache图文教程
2015/01/07 PHP
php带抄送和密件抄送的邮件发送方法
2015/03/20 PHP
PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能
2019/05/21 PHP
laravel框架查询数据集转为数组的两种方法
2019/10/10 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
DEFER怎么用?
2006/07/01 Javascript
escape、encodeURI、encodeURIComponent等方法的区别比较
2006/12/27 Javascript
jquery自定义滚动条插件示例分享
2014/02/21 Javascript
Nodejs Stream 数据流使用手册
2016/04/17 NodeJs
想学习javascript JS和jQuery哪个重要 先学哪个
2016/12/11 Javascript
浅谈JS验证表单文本域输入空格的问题
2017/02/14 Javascript
jquery获取transform里的值实现方法
2017/12/12 jQuery
vue-cli构建项目下使用微信分享功能
2018/05/28 Javascript
NodeJS搭建HTTP服务器的实现步骤
2018/10/12 NodeJs
jQuery+Datatables实现表格批量删除功能【推荐】
2018/10/24 jQuery
vue学习之Vue-Router用法实例分析
2020/01/06 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
2020/07/27 Javascript
[04:19]完美世界携手游戏风云打造 卡尔工作室模型介绍篇
2013/04/24 DOTA
[01:19:54]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#1Alliance VS EHOME
2016/03/03 DOTA
Python获取服务器信息的最简单实现方法
2015/03/05 Python
Python生成器的使用方法和示例代码
2019/03/04 Python
python做反被爬保护的方法
2019/07/01 Python
Python正则表达式急速入门(小结)
2019/12/16 Python
win10从零安装配置pytorch全过程图文详解
2020/05/08 Python
Python unittest discover批量执行代码实例
2020/09/08 Python
香港家用健身器材、运动器材及健康美容仪器专门店:FitBoxx
2019/12/05 全球购物
经营目标管理责任书
2014/07/25 职场文书
张家口市高新区党工委群众路线教育实践活动整改方案
2014/10/25 职场文书
2015年党员公开承诺书范文
2015/01/22 职场文书
2015年大学宣传部工作总结
2015/05/26 职场文书
教师节老师寄语
2015/05/28 职场文书
PyTorch 如何设置随机数种子使结果可复现
2021/05/12 Python
JavaScript继承的三种方法实例
2021/05/12 Javascript
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python
使用Nginx搭载rtmp直播服务器的方法
2021/10/16 Servers