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

 更新时间:2019年11月27日 11:41:09   作者:Independent  
这篇文章主要介绍了微信小程序表单验证WxValidate的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

效果图GIF

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实现图片裁剪功能

    在前端开发中,当遇到图片或头像上传等功能时,有尺寸分辨率限制的话,就需要用到图片的裁剪功能。本文为大家介绍了JavaScript实现图片裁剪功能的示例代码,希望对大家有所帮助
    2023-02-02
  • 使用javaScript动态加载Js文件和Css文件

    使用javaScript动态加载Js文件和Css文件

    这篇文章主要介绍了如何使用javaScript动态加载Js文件和Css文件
    2015-10-10
  • JavaScript焦点事件、鼠标事件和滚轮事件使用详解

    JavaScript焦点事件、鼠标事件和滚轮事件使用详解

    这篇文章主要介绍了JavaScript焦点事件、鼠标事件和滚轮事件使用详解,通过示例给大家讲解的非常细致,有需要的小伙伴可以参考下。
    2016-01-01
  • 详解webpack提取第三方库的正确姿势

    详解webpack提取第三方库的正确姿势

    本篇文章主要介绍了详解webpack提取第三方库的正确姿势,常用的提取第三方库的方法有两种,本文详细的介绍了这两种方法,有兴趣的可以了解一下
    2017-12-12
  • es7学习教程之Decorators(修饰器)详解

    es7学习教程之Decorators(修饰器)详解

    这篇文章主要给大家介绍了关于es7中Decorators(修饰器)的相关资料,文中通过示例代码给大家介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面跟着小编一起来学习学习吧。
    2017-07-07
  • 原生JS实现跑马灯效果

    原生JS实现跑马灯效果

    本文主要分享了原生JS实现跑马灯效果的示例代码。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • Electron应用显示隐藏时展示动画效果实例

    Electron应用显示隐藏时展示动画效果实例

    最近使用electron实现一个简单的功能,下面这篇文章主要给大家介绍了关于Electron应用显示隐藏时展示动画效果的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-05-05
  • JavaScript中new操作符的原理与实现详解

    JavaScript中new操作符的原理与实现详解

    你知道new吗?你知道new的实现原理吗?你能手写new方法吗?不要担心,这篇文件就来带大家深入了解一下JavaScript中的new操作符,感兴趣的小伙伴可以学习一下
    2022-10-10
  • 微信小程序 弹窗输入组件的实现解析

    微信小程序 弹窗输入组件的实现解析

    这篇文章主要介绍了微信小程序 弹窗输入组件的实现解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • JavaScript迭代器与生成器使用详解

    JavaScript迭代器与生成器使用详解

    迭代器是一个统一的接口,它的作用是使各种数据结构可以被便捷的访问,它是通过一个键为Symbol.iterator的方法来实现,这篇文章主要介绍了ES6 中的迭代器和生成器,需要的朋友可以参考下
    2022-11-11

最新评论