SoFunction
Updated on 2025-03-01

Complete example of WeChat applet form verification function

This article describes the form verification function of WeChat applets. Share it for your reference, as follows:

Wxml

<form bindsubmit="formSubmit" bindreset="formReset">
 <input name="name" class="{{whoClass=='name'?'placeholderClass':'inputClass'}}" placeholder="Please fill in your name" type="text" confirm-type="next" focus="{{whoFocus=='name'?true:false}}" bindblur="nameBlurFocus" />
 <radio-group name="gender" bindchange="radioChange">
  <radio value="0" checked />Miss
  <radio value="1" />gentlemen
 </radio-group>
 <input name="mobile" class="{{whoClass=='mobile'?'placeholderClass':'inputClass'}}" type="number" maxlength="11" placeholder="Please fill in your mobile phone number" bindblur="mobileBlurFocus" focus="{{whoFocus=='mobile'?true:false}}" />
 <input name="company" class="{{whoClass=='company'?'placeholderClass':'inputClass'}}" placeholder="Company Name" type="text" confirm-type="next" focus="{{whoFocus=='company'?true:false}}" />
 <input name="client" class="{{whoClass=='client'?'placeholderClass':'inputClass'}}" placeholder="Binding Customer" type="text" confirm-type="done" focus="{{whoFocus=='client'?true:false}}" />
 <button formType="submit">submit</button>
</form>
<loading hidden="{{submitHidden}}">
 正在submit...
</loading>

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

var appInstance = getApp()
//Form verification initializationonLoad: function () {
     = (
      {
        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: 'Please fill in your name',
        },
        mobile: {
          required: 'Please fill in your mobile phone number',
        },
        company: {
          required: 'Please enter the company name',
        },
        client: {
          required: 'Please enter the bind customer',
        }
      }
    )
  },
  //Form Submit   formSubmit: function (e) {
     //Submit error description    if (!(e)) {
      const error = [0]
      // `${} : ${} `
      ({
        title: `${} `,
        image: '/pages/images/',
        duration: 2000
      })
      return false
    }
    ({ submitHidden: false })
    var that = this
    //submit    ({
      url: '',
      data: {
        Realname: ,
        Gender: ,
        Mobile: ,
        Company: ,
        client: ,
        Identity: 
      },
      method: 'POST',
      success: function (requestRes) {
        ({ submitHidden: true })
         = 0
        ({
          delta: 1
        })
      },
      fail: function () {
      },
      complete: function () {
      }
    })
  }

Files click hereDownload this site

I hope this article will be helpful to everyone’s WeChat mini program development.