在微信小程式中如何實作表單驗證-js教程-PHP中文網

在微信小程式中如何實作表單驗證

亚连

發布： 2018-06-23 14:44:18

原創

2980 人瀏覽過

這篇文章主要介紹了微信小程式表單驗證功能,結合完整實例形式分析了微信小程式完成表單驗證功能所涉及的視圖與邏輯操作技巧,需要的朋友可以參考下

本文實例講述了微信小程式表單驗證功能。分享給大家參考，如下：

Wxml

<form bindsubmit="formSubmit" bindreset="formReset">
 <input name="name" class="{{whoClass==&#39;name&#39;?&#39;placeholderClass&#39;:&#39;inputClass&#39;}}" placeholder="请填写您的姓名" type="text" confirm-type="next" focus="{{whoFocus==&#39;name&#39;?true:false}}" bindblur="nameBlurFocus" />
 <radio-group name="gender" bindchange="radioChange">
  <radio value="0" checked />女士
  <radio value="1" />先生
 </radio-group>
 <input name="mobile" class="{{whoClass==&#39;mobile&#39;?&#39;placeholderClass&#39;:&#39;inputClass&#39;}}" type="number" maxlength="11" placeholder="请填写您的手机号" bindblur="mobileBlurFocus" focus="{{whoFocus==&#39;mobile&#39;?true:false}}" />
 <input name="company" class="{{whoClass==&#39;company&#39;?&#39;placeholderClass&#39;:&#39;inputClass&#39;}}" placeholder="公司名称" type="text" confirm-type="next" focus="{{whoFocus==&#39;company&#39;?true:false}}" />
 <input name="client" class="{{whoClass==&#39;client&#39;?&#39;placeholderClass&#39;:&#39;inputClass&#39;}}" placeholder="绑定客户" type="text" confirm-type="done" focus="{{whoFocus==&#39;client&#39;?true:false}}" />
 <button formType="submit">提交</button>
</form>
<loading hidden="{{submitHidden}}">
 正在提交...
</loading>

登入後複製

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

登入後複製

上面是我整理給大家的，希望今後對大家有幫助。

在Thinkjs3中如何使用靜態資源目錄

有關JsonObject中的key-value資料解析排序（詳細教學）

詳細解讀Thinkjs3的簡單使用

在vue中如何實作picker效果

以上是在微信小程式中如何實作表單驗證的詳細內容。更多資訊請關注PHP中文網其他相關文章！