在微信小程序中如何实现表单验证

本文实例讲述了微信小程序表单验证功能。分享给大家供大家参考，具体如下：

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效果