Beispiel für die Implementierung der Formularüberprüfungsfunktion im WeChat-Applet

Was ist das am schwierigsten umzusetzende öffentliche Geschäft in WeChat-Miniprogrammen? Es sollte sich um eine Formularüberprüfung handeln. In diesem Artikel wird hauptsächlich vorgestellt, wie das WeChat-Applet die Formularüberprüfungsfunktion implementiert. Interessierte Freunde können sich auf

Mini Program SDK Version 1.4 beziehen >Schwierigkeiten bei der Formularüberprüfung

Wenn Sie fragen möchten, welches öffentliche Geschäft in WeChat-Miniprogrammen am schwierigsten umzusetzen ist? Es sollte eine Formularüberprüfung sein, sonst nichts. Die Gründe sind wie folgt:

Die Anzahl der Formularkomponenten erreicht 11 und steht damit an erster Stelle unter allen Arten von Komponenten. Glücklicherweise müssen nicht alle überprüft werden.

Diese Komponenten können auf verschiedene Weise bedient werden, einschließlich Schieben, (mehrzeilige) Eingabe, Klicken und Klicken + Schieben.

Selbst wenn es sich um dieselbe Komponente handelt, gelten aufgrund unterschiedlicher Geschäftsszenarien unterschiedliche Überprüfungsregeln.

Noch problematischer ist, dass diese Komponenten oft verknüpft oder verifiziert sind.
…
Da es sich jedoch um eine nicht einfache statische Seite handelt, gibt es ein kleines Programm mit viel Benutzerinteraktion, und die Formularüberprüfung ist eine sehr häufige Funktion: Anmelden, Registrieren, Neu hinzufügen, Bearbeiten…

Kurz gesagt: Vielfalt an Formbestandteilen

Versuchen Sie es mit der Komponentisierung

Wenn Sie auf den Front-End-Entwicklungstrend der letzten Jahre achten, werden Sie definitiv an „Komponentisierung“ denken, um Folgendes zu erreichen:
Alles Die Ansichten, Stile und Validierungslogik jeder Formularkomponente werden in separate Geschäftskomponenten gekapselt und dann direkt aufgerufen.

Aber die Dinge scheinen nicht so einfach zu sein.

Wenn Sie erwägen, n native Komponenten zu abstrahieren, n Verifizierungsregeln hinzuzufügen und dann die Beziehung zwischen Komponenten mit n (vollständige Anordnung) zu multiplizieren, wird die Komplexität mindestens n³ erreichen.

Und der Verifizierungsfehler oder Erfolg jeder Komponente muss der übergeordneten Komponente mitgeteilt werden, damit die Fehlermeldung angezeigt oder der nächste Schritt ausgeführt werden kann.

Dies löst nicht nur das Problem nicht, sondern führt auch dazu, dass diese gemeinsamen Formularkomponenten zu komplex und verwirrend miteinander verknüpft werden.

Versuchen Sie es mit Nichtkomponentisierung

Da die ursprüngliche Idee nicht funktioniert, kehren wir zum Ausgangspunkt zurück und sehen, was unser Kern abstrahieren muss .
Es sind nichts weiter als zwei Dinge: der Elementstil der Ansichtsebene und die Validierungsregeln der Logikebene.

Wie oben erwähnt, erhöht die Kapselung nativer Formularkomponenten die Komplexität erheblich. Geben Sie es einfach auf und die Komplexität kann im Handumdrehen auf n² reduziert werden.

Aber gleichzeitig müssen wir einen einheitlichen Stil beibehalten, den wir oft als konsistenten Stil bezeichnen.

Zum Beispiel, wie hoch sollte das Eingabefeld sein, wie Fehlermeldungen angezeigt werden, Schriftgröße und -farbe usw.

Dies ist einfach. Wir schreiben die Stilklasse in eine öffentliche Stildatei form.wxss und importieren sie dann bei Bedarf oder importieren sie sogar global.

Wenn wir es verwenden, müssen wir nur den entsprechenden Stil zum entsprechenden Element hinzufügen. Zum Beispiel:

// form.wxss
.form {
 display: block;
 font-size: 28rpx;
 position: relative;
}
.form-line {
 background-color: #fff;
 border-bottom: 1px solid #e5e5e5;
 font-size: 34rpx;
 height: 96rpx;
 line-height: 96rpx;
 display: flex;
 padding: 0 31rpx;
}
.form-title {
 box-sizing: border-box;
 background-color: #efefef;
 color: #838383;
 font-size: 28rpx;
 padding: 31rpx;
 min-height: 90rpx;
}
...

Dann bleiben uns nur noch die beiden Probleme zwischen Verifizierungsregeln und Komponentenzuordnungen.

Validierungsregeln sollten idealerweise erweiterbar und konfigurierbar sein.

// xxx.wxml
<form class="form">
 <view class="form-title">请输入手机号</view>
 <view class="form-line">
  <label class="label">手机</label>
  <view class="form-control">
   <input class="f-1 va-m input" />
  </view>
 </view>
 ...
</form>

Erweiterbar. Wenn Ihr Unternehmen wächst, können Sie neue Verifizierungsregeln hinzufügen, ohne bestehende Regeln zu ändern.

Konfigurierbar. Für jede Formularkomponente können individuell verschiedene einzelne oder mehrere Validierungsregeln konfiguriert werden.

Wie macht man es definierbar? Verwenden Sie einfach ein einheitliches Formular. Zum Beispiel:

Wie mache ich es konfigurierbar? Die Konfiguration unterstützt ein Array-ähnliches Formular und verwendet dann eine einheitliche Funktion, um diese Überprüfungsregeln nacheinander zu lesen und sie einzeln zu überprüfen.

Die konfigurierten Regeln müssen sich auf der nativen Formularkomponente befinden und der Wert der Komponente kann nur über das Ereignisobjekt abgerufen werden.

/*
统一的格式：
[规则名]: {
 rule: [校验方式]
 msg: [错误信息]
}
*/
const validators = {
 // 简单的校验用正则
 required: {
  rule: /.+/,
  msg: '必填项不能为空'
 },
 // 复杂的校验用函数
 same: {
  rule (val='', sVal='') {
   return val===this.data[sVal]
  },
  msg: '密码不一致'
 }
 ...
}

Wenn Sie das Ereignis zur Überprüfung direkt binden, wird verhindert, dass die übergeordnete Seite den Wert erhält. Daher ist es am besten, das Ereignis an die übergeordnete Seite zu binden, um den Wert zu übergeben, und das Ereignisobjekt zu übergeben Ausführungsumgebung für die Verarbeitung:

ist auch sehr einfach, den entsprechenden Stil entsprechend dem festen Format aufzurufen, die Überprüfungsregeln zu konfigurieren und dann Rufen Sie die Verifizierungsfunktion auf.

/*
校验函数部分代码
e 事件对象
context 页面对象函数执行的上下文环境
*/
let validate = (e, context) => {
 // 从事件对象中获取组件的值
 let value = (e.detail.value || '').trim()
 // 从事件中获取校验规则名称
 let validator = e.currentTarget.dataset.validator ? e.currentTarget.dataset.validator .split(',') : []
 // 遍历规则进行校验
 for (let i = 0; i < validator.length; i++) {
  let ruleName = validator[i].split(&#39;=&#39;)[0]
  let ruleValue = validator[i].split(&#39;=&#39;)[1]
  let rule = validators[ruleName].rule || /.*/
  if (&#39;function&#39; === typeof rule) {
   rule.call(context, value, ruleValue) ? &#39;&#39; : validators[ruleName].msg
  } else {
   rule.test(value) ? &#39;&#39; : validators[ruleName].msg
  }
 }
 ...
}

Zusammenfassung

Das obige ist der detaillierte Inhalt vonBeispiel für die Implementierung der Formularüberprüfungsfunktion im WeChat-Applet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!