微信小程序表单验证功能完整实例

<form bindsubmit="formsubmit" bindreset="formreset">
 <input name="name" class="{{whoclass=='name'?'placeholderclass':'inputclass'}}" placeholder="请填写您的姓名" type="text" confirm-type="next" focus="{{whofocus=='name'?true:false}}" bindblur="nameblurfocus" />
 <radio-group name="gender" bindchange="radiochange">
  <radio value="0" checked />女士
  <radio value="1" />先生
 </radio-group>
 <input name="mobile" class="{{whoclass=='mobile'?'placeholderclass':'inputclass'}}" type="number" maxlength="11" placeholder="请填写您的手机号" bindblur="mobileblurfocus" focus="{{whofocus=='mobile'?true:false}}" />
 <input name="company" class="{{whoclass=='company'?'placeholderclass':'inputclass'}}" placeholder="公司名称" type="text" confirm-type="next" focus="{{whofocus=='company'?true:false}}" />
 <input name="client" class="{{whoclass=='client'?'placeholderclass':'inputclass'}}" placeholder="绑定客户" type="text" confirm-type="done" focus="{{whofocus=='client'?true:false}}" />
 <button formtype="submit">提交</button>
</form>
<loading hidden="{{submithidden}}">
 正在提交...
</loading>

import wxvalidate from 'utils/wxvalidate'
app({
  wxvalidate: (rules, messages) => new wxvalidate(rules, messages)
})

var appinstance = getapp()
//表单验证初始化
onload: function () {
    this.wxvalidate = appinstance.wxvalidate(
      {
        name: {
          required: true,
          minlength: 2,
          maxlength: 10,
        },
        mobile: {
          required: true,
          tel: true,
        },
        company: {
          required: true,
          minlength: 2,
          maxlength: 100,
        },
        client: {
          required: true,
          minlength: 2,
          maxlength: 100,
        }
      }
      , {
        name: {
          required: '请填写您的姓名姓名',
        },
        mobile: {
          required: '请填写您的手机号',
        },
        company: {
          required: '请输入公司名称',
        },
        client: {
          required: '请输入绑定客户',
        }
      }
    )
  },
  //表单提交
   formsubmit: function (e) {
     //提交错误描述
    if (!this.wxvalidate.checkform(e)) {
      const error = this.wxvalidate.errorlist[0]
      // `${error.param} : ${error.msg} `
      wx.showtoast({
        title: `${error.msg} `,
        image: '/pages/images/error.png',
        duration: 2000
      })
      return false
    }
    this.setdata({ submithidden: false })
    var that = this
    //提交
    wx.request({
      url: '',
      data: {
        realname: e.detail.value.name,
        gender: e.detail.value.gender,
        mobile: e.detail.value.mobile,
        company: e.detail.value.company,
        client: e.detail.value.client,
        identity: appinstance.userstate.identity
      },
      method: 'post',
      success: function (requestres) {
        that.setdata({ submithidden: true })
        appinstance.userstate.status = 0
        wx.navigateback({
          delta: 1
        })
      },
      fail: function () {
      },
      complete: function () {
      }
    })
  }