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

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

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

Wxml

 form bindsubmit= formSubmit bindreset= formReset 
 input name= name >
app.js
import wxValidate from #39;utils/wxValidate #39;
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: #39;请填写您的姓名姓名 #39;,
 mobile: {
 required: #39;请填写您的手机号 #39;,
 company: {
 required: #39;请输入公司名称 #39;,
 client: {
 required: #39;请输入绑定客户 #39;,
 //表单提交
 formSubmit: function (e) {
 //提交错误描述
 if (!this.WxValidate.checkForm(e)) {
 const error = this.WxValidate.errorList[0]
 // `${error.param} : ${error.msg} `
 wx.showToast({
 title: `${error.msg} `,
 image: #39;/pages/images/error.png #39;,
 duration: 2000
 return false
 this.setData({ submitHidden: false })
 var that = this
 //提交
 wx.request({
 url: #39; #39;,
 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: #39;POST #39;,
 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如何实现微信小程序支付及退款
微信小程序开发入门实例
以上就是微信小程序表单验证功能完整实例的详细内容，更多请关注php中文网其它相关文章！
 
  
 微信app下载
 
微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！