Partage de code de vérification du formulaire Vue from-validate

Cet article vous présente principalement l'exemple de code de vérification du formulaire Vue à partir de la validation. L'éditeur pense qu'il est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

Avant-propos

La vérification des données du formulaire est requise. HTML5 était à l'origine utilisé pour terminer la vérification, mais l'effet était médiocre et pas assez flexible, il était donc nécessaire. à personnaliser. Pour la validation du formulaire, les plug-ins en ligne sont trop volumineux et le projet n'a pas autant d'exigences.
Alors écrivons-en un nous-mêmes !

Préparation des connaissances

Instructions personnalisées de vue

Pour plus de détails, veuillez consulter le manuel officiel, le lien est le suivant : https:/ /vuejs.org /v2/guide/custom-directive.html

En général, cela peut vous aider à accéder à votre fonction dans la fonction hook spécifiée, les paramètres (el, liaison, vnode)

• el : dom lié

• binding : divers attributs de la directive

• vnode : compilation Vue Le nœud virtuel généré

Démarrer

1. Déclaration de la commande

Il est à noter que les paramètres sont à l'arrière Après la liaison, il ne sera pas bloqué, utilisez donc la méthode de fermeture

Vue.directive('validate', {
 // 在指令第一次背绑定上时调用
 bind(el, binding, vnode) {
 }
}

<form id="red-package" @submit.prevent="submit" v-validate.formData="validate">
 ...
 <button type="submit" class="save">保存</button>
</form>

2 Analyser les paramètres

Vue.directive('validate', {
 // vm对象，就是组件
 const vm = vnode.context;
 // 获得参数绑定的参数，就是规则对象
 const validate = binding.value;
 // 获得数据的key
 const dataKey = Object.keys(binding.modifiers)[0];
});

Vérifiez les règles lors de l'entrée. modifications du contenu

el.addEventListener('change', (e) => {
 try {
  // 事件触发的input标签名
  const changeElName = e.srcElement.name;
  // 如果未设定规则不验证
  if (validate[changeElName]) {
   // 把表单的所有参数传入
   validate[changeElName](vm[dataKey]);
   // 检验成功添加成功的class
   Util.removeClass(e.srcElement, 'success');
  }
 } catch (err) {
  // 抛出异常添加失败的class
  Util.addClass(e.srcElement, 'error');
 }
});

4. Vérifiez toutes les données lors de la soumission

// 有更好的方案
el.getElementsByTagName('button')[0].addEventListener('click', (e) => {
 try {
  // 遍历对象
  Object.keys(vm[dataKey]).forEach((item) => {
   if (validate[item]) {
    validate[item](vm[dataKey]);
   }
  });
 } catch (err) {
  // 抛出错误提示
  vm.loading({
   text: '请检查参数',
  });
  vm.loaded(1000);
  // 阻止submit
  e.preventDefault();
 }
});

5 Exemples de règles de vérification

amountRandomUpper({ budget, amountRandomUpper, amountRandomLower }) {
  if (amountRandomUpper < 1) {
    throw new Error(&#39;过小&#39;);
  }
  if (amountRandomUpper < amountRandomLower) {
    throw new Error(&#39;过小&#39;);
  }
  if (amountRandomUpper > budget) {
    throw new Error(&#39;过小&#39;);
  }
}

Fin

Il y a encore de nombreux problèmes ici. J'espère que vous pourrez signaler de bonnes suggestions.

Recommandations associées :

vue, vue-validator implémente la fonction de vérification de formulaire

Explication détaillée de la fonction de vérification de formulaire Bootstrap

Validation du formulaire

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!