本文实例讲述了微信小程序表单验证功能。分享给大家供大家参考，具体如下：
wxml
<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>
app.js
import wxvalidate from 'utils/wxvalidate'app({ wxvalidate: (rules, messages) => new wxvalidate(rules, messages)})
news.js
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 () { } }) }
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
在thinkjs3中如何使用静态资源目录
有关jsonobject中的key-value数据解析排序（详细教程）
详细解读thinkjs3的简单使用
在vue中如何实现picker效果
以上就是在微信小程序中如何实现表单验证的详细内容。