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.