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

发布时间:2020-09-29 10:22:11 作者:Independent
来源:脚本之家 阅读:206

效果图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
     })
  },
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持亿速云。

推荐阅读:
  1. 微信小程序表单验证插件WxValidate的二次封装功能(终极版)
  2. 微信小程序如何使用globalData

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

小程序 表单验证 wxvalidate

上一篇:微信小程序 出现错误:{"baseresponse":{"errcode":-80002,"errmsg":""}}解决

下一篇:linux中chmod命令用法详解

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》