微信小程序怎么實(shí)現(xiàn)表單驗(yàn)證功能

這篇文章主要講解了“微信小程序怎么實(shí)現(xiàn)表單驗(yàn)證功能”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“微信小程序怎么實(shí)現(xiàn)表單驗(yàn)證功能”吧！

創(chuàng)新互聯(lián)10多年成都企業(yè)網(wǎng)站建設(shè)服務(wù);為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁設(shè)計(jì)及高端網(wǎng)站定制服務(wù),成都企業(yè)網(wǎng)站建設(shè)及推廣,對格柵板等多個(gè)領(lǐng)域擁有豐富建站經(jīng)驗(yàn)的網(wǎng)站建設(shè)公司。

Wxml

 
 
  女士
  先生
 
 
 
 
 提交


 正在提交...

app.js

import wxValidate from 'utils/wxValidate'
App({
  wxValidate: (rules, messages) => new wxValidate(rules, messages)
})

news.js

var appInstance = getApp()
//表單驗(yàn)證初始化
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: '請?zhí)顚懩男彰彰?#39;,
        },
        mobile: {
          required: '請?zhí)顚懩氖謾C(jī)號',
        },
        company: {
          required: '請輸入公司名稱',
        },
        client: {
          required: '請輸入綁定客戶',
        }
      }
    )
  },
  //表單提交
   formSubmit: function (e) {
     //提交錯(cuò)誤描述
    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 () {
      }
    })
  }

感謝各位的閱讀，以上就是“微信小程序怎么實(shí)現(xiàn)表單驗(yàn)證功能”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對微信小程序怎么實(shí)現(xiàn)表單驗(yàn)證功能這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！

新聞標(biāo)題：微信小程序怎么實(shí)現(xiàn)表單驗(yàn)證功能
文章位置：http://www.jiaotiyi.com/article/jojpcd.html