Exemple d'implémentation de la fonction de vérification de formulaire dans l'applet WeChat

Quelle est l'entreprise publique la plus difficile à mettre en œuvre dans les mini-programmes WeChat ? Il devrait s'agir d'une vérification de formulaire. Cet article présente principalement comment l'applet WeChat implémente la fonction de vérification de formulaire. Les amis intéressés peuvent se référer au

Mini Program SDK

Difficulté à vérifier le formulaire

Si vous voulez demander, quelle est l'entreprise publique la plus difficile à mettre en œuvre dans les mini-programmes WeChat ? Il devrait s'agir d'une vérification de formulaire, rien d'autre. Les raisons sont les suivantes :

Le nombre de composants de formulaire atteint 11, se classant au premier rang parmi tous les types de composants. Heureusement, bien entendu, tout n’est pas nécessairement vérifié.

Ces composants peuvent être utilisés de différentes manières, notamment par glissement, saisie (multiligne), clic et clic + glissement.
Même s'il s'agit du même composant, il y aura des règles de vérification différentes en raison de différents scénarios commerciaux.
Ce qui est encore plus gênant, c'est que ces composants sont souvent liés ou vérifiés.
…
Cependant, en tant que page statique non simple, il existe un petit programme avec beaucoup d'interactions utilisateur, et la vérification du formulaire est une fonction très courante : connexion, inscription, nouvel ajout, édition…

En bref : Diversité des composants de formulaire

Essayez la composantisation

Si vous faites attention à la tendance du développement front-end de ces dernières années, vous penserez certainement à la « composantisation » pour réaliser :

Tout Les vues, les styles et la logique de validation de chaque composant de formulaire sont encapsulés dans des composants métier distincts, puis appelés directement.

Mais les choses ne semblent pas si simples.

Si vous envisagez d'abstraire n composants natifs, d'ajouter n règles de vérification, puis de multiplier par n (arrangement complet) la relation entre les composants, la complexité atteindra au moins n³.

Et l'échec ou le succès de la vérification de chaque composant doit être notifié au composant parent afin que le message d'erreur puisse être affiché ou que l'étape suivante puisse être effectuée.

Non seulement cela ne résout pas le problème, mais cela rend en fait ces composants de formulaire communs trop complexes et couplés de manière confuse.

Essayez la non-componentisation

Puisque l'idée originale ne fonctionne pas, revenons au point de départ et voyons ce que notre noyau doit être abstrait .

Ce n'est rien de plus que deux choses : le style d'élément de la couche de vue et les règles de validation de la couche logique.

Comme mentionné ci-dessus, l'encapsulation de composants de formulaire natifs augmentera considérablement la complexité. Il suffit de l'abandonner, et la complexité peut être réduite à n² en un instant.

Mais en même temps, nous devons maintenir un style unifié, ce que nous appelons souvent un style cohérent.

Par exemple, quelle doit être la hauteur de la zone de saisie, comment afficher les invites d'erreur, la taille et la couleur de la police... etc.

C'est facile à faire. Nous écrivons la classe de style dans un fichier de style public form.wxss, puis l'importons si nécessaire, ou même l'importons globalement.

Lorsque nous l'utilisons, il suffit d'ajouter le style correspondant à l'élément correspondant. Par exemple :

// 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;
}
...

Il ne nous reste alors plus que les deux problèmes entre les règles de vérification et les associations de composants.

// 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>

Les règles de validation doivent idéalement être extensibles et configurables.

Extensible. À mesure que votre entreprise se développe, vous pouvez ajouter de nouvelles règles de vérification sans modifier les règles existantes.

Configurable. Différentes règles de validation simples ou multiples peuvent être configurées individuellement pour chaque composant de formulaire.

Comment le rendre définissable ? Utilisez simplement un formulaire unifié. Par exemple :

Comment le rendre configurable ? La configuration prend en charge une forme de type tableau, puis utilise une fonction unifiée pour lire ces règles de vérification dans l'ordre et les vérifier une par une.

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

Les règles configurées doivent être sur le composant de formulaire natif, et la valeur du composant ne peut être obtenue que via l'objet événement.

Si vous liez directement l'événement pour vérification, cela empêchera la page parent d'obtenir la valeur, il est donc préférable de lier l'événement à la page parent pour transmettre la valeur, et de transmettre l'objet événement et environnement d'exécution pour le traitement :

est également très simple à appeler selon le format fixe, configurez les règles de vérification, puis. appeler la fonction de vérification.

/*
校验函数部分代码
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
  }
 }
 ...
}

Résumé

// 部分代码示例
// page.wxml
<form>
 <!-- 一个表单组件 -->
 <view class="form-line">
  <label class="label">授权手机</label>
  <view class="form-control">
   <!-- 校验规则：必须填写，且为电话号码 -->
   <input maxlength="11" class="f-1 va-m input" bindblur="validate" type="number" data-name="phone" data-validator="required,phone" confirm-type="next" value="{{phone}}" />
   <!-- 错误图标 -->
   <icon wx:if="{{form.phone!==undefined}}" type="{{form.phone?&#39;warn&#39;:&#39;success&#39;}}" size="16" />
  </view>
 </view>
 ...
</form>
// page.js
valid(e) {
 this.setData({
  [e.currentTarget.dataset.name]: e.detail.value
 })
 validate(e, this)
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!