微信小程序表单验证功能完整实例

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

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

相关推荐：

使用JQuery实现智能表单验证功能_jquery

CSS3和HTML5实现表单验证功能的示例详解

JavaScript表单验证功能的介绍

php如何实现微信小程序支付及退款

微信小程序开发入门实例

以上就是微信小程序表单验证功能完整实例的详细内容，更多内容请关注技术你好其它相关文章！