微信小程序表单验证功能

小编给大家分享一下微信小程序表单验证功能，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

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 () {       }     })   }

以上是“微信小程序表单验证功能”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！