小程序繁琐的表单验证？Speak "NO"

最新推荐文章于 2023-10-17 01:38:58 发布

codingQicf

最新推荐文章于 2023-10-17 01:38:58 发布

阅读量223

点赞数 1

CC 4.0 BY-SA版权

分类专栏：小程序

本文链接：https://blog.csdn.net/codingqicf/article/details/89883311

小程序专栏收录该内容

2 篇文章

订阅专栏

博客介绍了WxValidate插件，给出其下载地址https://github.com/icindy/wxParse ，并说明了两种使用方式。重点阐述全局引入方式，包括在app.js中引入、加入全局变量，还提及使用插件时两个参数的含义，即参与校验的字段名和规则、校验失败提示。

WxValidate

主要使用的为上面的一个插件。下载地址 https://github.com/icindy/wxParse
两种使用方式。

全局引入。

1.在app.js中引入：import WxValidate from 'utils/WxValidate.js'
2.在app.js中加入全局变量：WxValidate: (rules,messages) => new WxValidate(rules,messages),
在这里插入图片描述
3.使用插件。两个参数
第一个是参与校验的字段名和需要校验的规则。
第二个是每个字段校验规则失败后的提示。
直接定义。传入即可。

  //表单校验
  initValidate(){
    const rules = {
      addressContacts: {
        required: true,
        minlength: 2
      },
      addressPhone: {
        required: true,
        tel: true
      },
      addressReceiving: {
        required: true,
      },
      addressHouseNumber: {
        required: true,
      }
    }
    const messages = {
      addressContacts: {
        required: '请填写联系人',
        minlength: '联系人最少要输入2个字符。'
      },
      addressPhone: {
        required: '请填写手机号',
        tel: '请输入11位的手机号码。'
      },
      addressReceiving: {
        required: '请填写所在区域',
      },
      addressHouseNumber: {
        required: '请填写详细地址',
      }

    }
    this.data.WxValidate = app.WxValidate(rules, messages)
  },

if (!this.WxValidate.checkForm(e.detail.value)) {
      const error = this.WxValidate.errorList[0]
      this.showModal(error)
      return false
    }
    
//显示提示框
  showModal(error) {
    wx.showToast({
      icon: "none",
      title: error.msg,
    })
  },

1.注意，from里的表单 name 属性要和定义的一致。
2.initValidate()方法需要在页面onload方法调用一次