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

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

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

Wxml

 
 
  女士
  先生
 
 
 
 
 提交

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

阳光订餐平台

本订餐程序由阳光工作室首先开发，并且经过实际的运营使用，结合了物流和财务，经过半年的校园实际使用的论证和完善，是一款成熟和经济的校园订餐系统。本程序小巧，快速，但并不失功能强大，具有菜单管理，物流管理，店铺管理，员工管理，会员管理，短信，WAP等功能，是一款量身定做的专业的校园订餐管理系统。安装：打开config.php,手工配置好安装文件后运行install.php就可以了。后台目录：admin

下载

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

JavaScript表单验证功能的介绍

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

微信小程序开发入门实例