Freigabe des Vue-Formularverifizierungscodes für die Formularvalidierung

In diesem Artikel wird Ihnen hauptsächlich der Beispielcode für die From-Validate-Formularüberprüfung vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Vorwort

Für die Verifizierung wurde ursprünglich HTML5 verwendet, aber der Effekt war schlecht und nicht flexibel genug, sodass dies erforderlich war Für die Formularvalidierung sind Online-Plugins zu groß und das Projekt stellt nicht so viele Anforderungen.
Dann lasst uns selbst eines schreiben!

Wissensvorbereitung

benutzerdefinierte Anweisungen von vue

Einzelheiten finden Sie im offiziellen Handbuch. Der Link lautet wie folgt: https:/ /vuejs.org /v2/guide/custom-directive.html

Im Allgemeinen kann es Ihnen helfen, zu Ihrer Funktion in der angegebenen Hook-Funktion und den Parametern (el, binding, vnode) zu springen

• el: gebundener Dom

• Bindung: verschiedene Attribute der Direktive

• vnode: Vue-Kompilierung Die generierter virtueller Knoten

Start

1. Deklaration des Befehls

Es ist zu beachten, dass die Parameter sind nach der Bindung nicht blockiert, also verwenden Sie die Verschlussmethode

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. Überprüfen Sie die Regeln bei der Eingabe Inhaltsänderungen

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

Überprüfen Sie alle Daten beim Einreichen

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');
 }
});

5. Beispiele für Verifizierungsregeln

// 有更好的方案
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();
 }
});

Ende

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;);
  }
}

Hier gibt es noch viele Probleme. Ich hoffe, Sie können uns auf gute Vorschläge hinweisen.

Verwandte Empfehlungen:

vue, vue-validator implementiert die Formularüberprüfungsfunktion

Detaillierte Erläuterung der Bootstrap-Formularüberprüfungsfunktion

Formularvalidierung

Das obige ist der detaillierte Inhalt vonFreigabe des Vue-Formularverifizierungscodes für die Formularvalidierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!