Heim > WeChat-Applet > Mini-Programmentwicklung > Vollständiges Beispiel für die Formularüberprüfungsfunktion des WeChat-Miniprogramms

Vollständiges Beispiel für die Formularüberprüfungsfunktion des WeChat-Miniprogramms

小云云
Freigeben: 2018-05-16 09:58:01
Original
6763 Leute haben es durchsucht

In Kombination mit dem vollständigen Beispielformular werden die Ansichts- und logischen Bedienungsfähigkeiten analysiert, die beim Ausfüllen der Formularüberprüfungsfunktion des WeChat-Applets erforderlich sind. In diesem Artikel wird hauptsächlich die Formularüberprüfungsfunktion des WeChat-Applets vorgestellt .

Das Beispiel in diesem Artikel beschreibt die Formularüberprüfungsfunktion des WeChat-Miniprogramms. Teilen Sie es wie folgt als Referenz mit allen:

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>
Nach dem Login kopieren

app.js

import wxValidate from &#39;utils/wxValidate&#39;
App({
  wxValidate: (rules, messages) => new wxValidate(rules, messages)
})
Nach dem Login kopieren

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 () {
      }
    })
  }
Nach dem Login kopieren

Verwandte Empfehlungen:

Verwenden Sie JQuery, um die Funktion zur intelligenten Formularvalidierung zu implementieren_jquery

Detaillierte Beispiele von CSS3 und HTML5 zur Implementierung der Formularvalidierungsfunktion

Einführung in die JavaScript-Formularüberprüfungsfunktion

So implementieren Sie die Zahlung und Rückerstattung des WeChat-Miniprogramms in PHP

Einführung in WeChat Beispiel für die Entwicklung eines Miniprogramms

Das obige ist der detaillierte Inhalt vonVollständiges Beispiel für die Formularüberprüfungsfunktion des WeChat-Miniprogramms. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage