微信小程序表单验证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 相关文章推荐
兼容多浏览器的字幕特效Marquee的通用js类
Jul 20 Javascript
javascript写的一个链表实现代码
Oct 25 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
Dec 12 Javascript
JS获取Table中td值的方法
Mar 19 Javascript
JS验证IP,子网掩码,网关和MAC的方法
Jul 02 Javascript
Easyui form combobox省市区三级联动
Jan 13 Javascript
深入了解JavaScript的逻辑运算符(与、或)
Dec 20 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
Mar 08 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
Nov 15 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 jQuery
使用 vue 实现灭霸打响指英雄消失的效果附demo
May 06 Javascript
Nest.js 授权验证的方法示例
Feb 22 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
虫族 ZERG 概述
2020/03/14 星际争霸
使用vs code编辑调试php配置的方法
2019/01/29 PHP
Javascript中eval函数的使用方法与示例
2007/04/09 Javascript
window.location和document.location的区别分析
2008/12/23 Javascript
jquery animate 动画效果使用说明
2009/11/04 Javascript
Cookie 小记
2010/04/01 Javascript
jquery修改属性值实例代码(设置属性值)
2014/01/06 Javascript
Javascript堆排序算法详解
2014/12/03 Javascript
浅谈使用MVC模式进行JavaScript程序开发
2015/11/10 Javascript
jQuery实现简洁的轮播图效果实例
2016/09/07 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
2016/11/06 Javascript
jQuery中DOM节点的删除方法总结(超全面)
2017/01/22 Javascript
使用grunt合并压缩js和css文件的方法
2017/03/02 Javascript
Vuex之理解state的用法实例
2017/04/19 Javascript
js上传图片预览的实现方法
2017/05/09 Javascript
Vue.js实现价格计算器功能
2020/03/30 Javascript
JavaScript表单即时验证 验证不成功不能提交
2017/08/31 Javascript
JavaScript实现的斑马线表格效果【隔行变色】
2017/09/18 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
2018/11/02 Javascript
es6数组之扩展运算符操作实例分析
2020/04/25 Javascript
vue-列表下详情的展开与折叠案例
2020/07/28 Javascript
Python制作简易注册登录系统
2016/12/15 Python
Python 二叉树的层序建立与三种遍历实现详解
2019/07/29 Python
如何定义TensorFlow输入节点
2020/01/23 Python
简单了解如何封装自己的Python包
2020/07/08 Python
CSS3的calc()做响应模式布局的实现方法
2017/09/06 HTML / CSS
HTML5 transform三维立方体实现360无死角三维旋转效果
2014/08/22 HTML / CSS
Web时代变迁及html5与html4的区别
2016/01/06 HTML / CSS
Ray-Ban雷朋美国官网:全球领先的太阳眼镜品牌
2016/07/20 全球购物
美国百年历史早餐食品供应商:Wolferman’s
2017/01/18 全球购物
新学期校长寄语
2014/01/18 职场文书
优秀班干部事迹材料
2014/01/26 职场文书
教师爱岗敬业演讲稿
2014/05/05 职场文书
导师推荐信范文
2014/05/09 职场文书
婚礼父母致辞
2015/07/28 职场文书
高中议论文(范文2篇)
2019/08/19 职场文书