WeChat-Applet-Entwicklung Formularvalidierung WxValidate-Nutzung

Ich persönlich bin der Meinung, dass das Entwicklungsframework des WeChat-Applets im Allgemeinen VUE ähnelt, seine Formularkomponente jedoch keine eigene Validierungsfunktion besitzt. Daher gibt es bei der Entwicklung der Formularvalidierung für Applets im Allgemeinen zwei Methoden. Eine besteht darin, die Validierungsregeln selbst zu schreiben, was jedoch eine solide Grundlage in regulären Ausdrücken erfordert. Die andere besteht darin, das von der offiziellen Community entwickelte WxValidate-Plugin zur Formularvalidierung zu verwenden.

Das WxValidate-Plug-In ist mit Bezug auf jQuery Validate gekapselt. Es bietet eine Reihe häufig verwendeter Validierungsregeln für Miniprogrammformulare, einschließlich Mobiltelefonnummer, E-Mail-Verifizierung usw. Es bietet auch eine Methode zum Hinzufügen benutzerdefinierter Validierungen, um die Formularvalidierung zu vereinfachen.

Zunächst finden Sie die Download-Adresse und die offizielle Dokumentation des Plug-Ins in WxValidate Download-Adresse und Dokumentadresse

Der genaue Speicherort der Datei WxValidate.js ist wx-extend/src/assets/plugins/ wx-validate /WxValidate.js

Die erste Methode besteht darin, die Plug-In-Datei in das gewünschte Dateiverzeichnis zu kopieren.

Anschließend können Sie das Plug-In mithilfe der lokalen Referenz in die JS-Datei der gewünschten Seite einfügen. Die spezifischen Vorgänge sind wie folgt

//Importieren Sie auf der Seite index.js WxValidate aus „../../utils/WxValidate.js“.
const app = getApp()
Seite({
  Daten: {
    bilden: {
      Name: '',
      Telefon: ''
    }
  }
})

Zu beachten ist hierbei die Angabe des Dateipfades

/ wird vom Stammverzeichnis aus gezählt./ wird vom Verzeichnis file der importierten Datei aus gezählt, in diesem Fall vom Verzeichnis, in dem sich index.js befindet../ wird vom übergeordneten Verzeichnis der importierten Datei aus gezählt, in diesem Fall vom Verzeichnis des Indexordners, und ../../ wird vom Verzeichnis aus gezählt, in dem sich die Seiten befinden. Wenn der Dateipfad hier falsch geschrieben ist, wird die Kompilierung einen Fehler melden.

Achten Sie dann auf die Datenbindung des Formularbausteins in der wXML-Datei, da sonst die Regeln nicht verifiziert werden können, egal wie der Formularbaustein ausgefüllt wird.

Die Bindungsmethode der Formularkomponente ist wie folgt

//wxml-Seite <form bindsubmit="formSubmit">
    <view class="weui-cells__title">Bitte geben Sie Ihre persönlichen Daten ein</view>
    <Ansichtsklasse="weui-cells weui-cells_after-title">
      <Ansichtsklasse="weui-cell weui-cell_input">
        <Ansichtsklasse="weui-cell__hd">
          <view class="weui-label">Name</view>
        </Ansicht>
        <Ansichtsklasse="weui-cell__bd">
          <input class="weui-input" name='name' value='{{form.name}}' placeholder="Bitte geben Sie Ihren Namen ein" />
        </Ansicht>
      </Ansicht>
      <Klasse anzeigen="weui-cell weui-cell_input weui-cell_vcode">
        <Ansichtsklasse="weui-cell__hd">
          <view class="weui-label">Mobiltelefonnummer</view>
        </Ansicht>
        <Ansichtsklasse="weui-cell__bd">
          <input class="weui-input" name='phone' type='number' value='{{form.phone}}' placeholder="Bitte geben Sie Ihre Telefonnummer ein" />
        </Ansicht>
        </Ansicht>
    </Ansicht>
</form>

Die Hauptmethode besteht darin, dem zu überprüfenden Eingabefeld die Wertbindung hinzuzufügen. Gleiches gilt für andere Komponenten.

Fügen Sie dann die Formularbindung zur js-Datei hinzu

//index.js
Seite({
  Daten: {
    bilden: {
      Name: '',
      Telefon: ''
    }
  }
})

Dann kommt das wichtigste Verifizierungsregelschreiben

Zuerst müssen Sie die Validierungsregelfunktion zur onLoad-Funktion hinzufügen

// Es gibt mehrere Funktionen in onLoad. Schreibe den Funktionsnamen in die onLoad-Funktion und definiere die Funktion außerhalb von onLoad onLoad() {
    dies.getuser()
    this.initValidate()//Validierungsregelfunktion}
 
//OnLoad enthält nur eine Funktion onLoad:function(){
    Regeln:{}
    Nachrichten:{}
    }

Hierbei ist zu beachten, dass die onLoad-Validierungsregeln in der js-Datei enthalten sein müssen, da sonst bei der Kompilierung gemeldet wird, dass checkform keine Funktion ist

Dann gibt es den Code für Validierungsregeln und Fehlerregeln

// Einen Fehler melden showModal(error) {
    wx.showModal({
      Inhalt: error.msg,
      showCancel: false,
    })
  },
//Verifizierungsfunktion initValidate() {
    const Regeln = {
      Name: {
        erforderlich: wahr,
        Mindestlänge: 2
      },
      Telefon:{
        erforderlich: wahr,
        tel:true
      }
    }
    const Nachrichten = {
      Name: {
        erforderlich: 'Bitte geben Sie Ihren Namen ein',
        minlength:'Bitte geben Sie einen korrekten Namen ein'
      },
      Telefon:{
        erforderlich:'Bitte geben Sie Ihre Handynummer ein',
        Tel: „Bitte geben Sie die korrekte Mobiltelefonnummer ein“
      }
    }
    this.WxValidate = neues WxValidate(Regeln, Nachrichten)
  },
//Verifizierungsfunktion aufrufen formSubmit: function(e) {
    console.log('Im Formular ist ein Übermittlungsereignis aufgetreten. Die übertragenen Daten sind:', e.detail.value)
    const params = e.detail.value
    //Formular prüfen if (!this.WxValidate.checkForm(params)) {
      const Fehler = this.WxValidate.errorList[0]
      this.showModal(Fehler)
      return false
    }
    dies.showModal({
      Nachricht: „Übermittlung erfolgreich“
    })
  }

Hier habe ich nur ein bisschen über die Feldvalidierung geschrieben. Das offizielle Dokument enthält auch viele Regeln für die Feldvalidierung, daher werde ich sie nicht einzeln aufschreiben. Was hier zu beachten ist, ist, dass das Objekt in initValidate() instantiiert werden muss, bis jetzt ist die Formularvalidierung abgeschlossen

Werfen wir einen Blick auf den Demonstrationseffekt

Sie können auch das oben heruntergeladene Beispiel ausführen, das über weitere Formularvalidierungseffekte verfügt.

Dies ist das Ende dieses Artikels über die Verwendung von WxValidate zur Formularvalidierung bei der Entwicklung von WeChat-Miniprogrammen. Weitere relevante Inhalte zur Formularvalidierung von Miniprogrammen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!