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

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方法调用一次