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

结合完整实例形式，分析了微信小程序完成表单验证功能所涉及的视图与逻辑操作技巧，本文主要介绍了微信小程序表单验证功能,需要的朋友可以参考下。

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

Wxml<form bindsubmit="formSubmit" bindreset="formReset"> <input name="name">app.jsimport wxValidate from 'utils/wxValidate'App({wxValidate: (rules, messages) => new wxValidate(rules, messages)})news.jsvar 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 = 0wx.navigateBack({delta: 1})},fail: function () {},complete: function () {}})}相关推荐：

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

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

JavaScript表单验证功能的介绍

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

微信小程序开发入门实例以上就是微信小程序表单验证功能完整实例的详细内容，更多请关注小潘博客其它相关文章！