vueカスタムコマンド開発フォームを使って、validate.jsを検証します。

この時間は新しいプロジェクトの前期構築を行っています。新しいプロジェクトの枠組みはvue-cli 3とtypescirptを使って構築します。プロジェクトは比較的軽いので、余分なuiコンポーネントをほとんど使っていません。時々必要な基礎部品は直接自分で開発します。今日はVueのカスタムコマンドdirectiveを利用してフォーム検証プラグインを開発する過程を紹介します。
1.vueプラグインの開発
vueのプラグインの開発については、公式文書ではっきりと説明されています。詳細は開発文書を読むことができます。私自身が開発したフォーム検証プラグインvalidate.tsとloadingは、messageBoxプラグインがこのような方式を利用しています。今日はまずフォーム検証プラグインの開発を見ます。
Vueグローバルコマンド

// myPlugin.js
export default {
 install: (Vue, options) => {
 //     my-directive  
 Vue.directive('my-directive', {
  bind(el, binding, vnode, oldVnode) {
  //   
  }
  ...
 })
 }
}
// main.js
import Vue from 'vue';
import myPlugin from 'myPlugin';
Vue.use(myPlugin);

上はVue命令プラグインを登録する書き方です。注意すべきはカスタムコマンドを登録する時、bind()関数は指令のフック関数であり、その中のパラメータはコマンドバインディングの要素を表し、直接DOMを操作することができます。bindingは、コマンド名、バインディング値などのオブジェクトを表します。vnodeとoldVnodeはVueコンパイルで生成された仮想ノードを表します。
グローバルコマンドv-validateParaamsコマンドを登録することによって、入力フォームのinputラベルに結び付けて、現在の入力値が要求に合っているかどうかを確認します。
2.v-validateParams指令
最初はネットのコードを参考にしました。基礎の実現は以下の通りである。
全体フレーム

import Vue from 'vue'
export default {
 install: (Vue, options) => {
 //             `v-validateParams`
 Vue.directive('validateParams', {
  //            DOM   
  inserted: function (el, binding, vNode) {
  //       Dom        ，         
  //                  
  el.addEventListener('blur', function (event) {
   // 1.          
   // 2.                        
   // 3.                  
  })
  }
 })
 //             `v-validateSubmit`，            button 
 Vue.directive('validateSubmit', {
  //            DOM   
  inserted: function (el, binding, vNode) {
  //    button      
  el.addEventListener('click', function (event) {
   //            v-check     
   let elements = vNode.context.$el.getElementsByClassName('v-check')
   var evObj = vNode.context.$el.createEvent('Event')
   evObj.initEvent('blur', true, true)
   for (let element of elements) {
   //    v-check    blur  
   element.dispatchEvent(evObj);
   }
   //                 
   let errorInputs = vNode.context.$el.getElementsByClassName('input-error');
   //              ，           submit()  
   if(errorInputs.length === 0){
   vNode.context.submit();
   }
  })
  }
 })
 }
}

ここでは、validateSubmit命令を提出ボタンに結び付け、クリックした時に検査を行い、検証が通過したら提出操作を実行します。しかし、ここの実現方式は特別友好ではありません。
1.現在のコンポーネントのすべてのinput要素を取得し、彼らにバインディングしてblurイベントを実行する必要があります。これにより、validateParaamsコマンドの検証ロジックを実行します。
2.現在のコンポーネントの中のすべてのエラーメッセージ要素を取得する必要があります。彼らが存在すると提出操作ができません。
3.コンポーネント内にエラーメッセージ要素が含まれていない場合は、チェック通過を表し、現在のコンポーネント内のsubmit関数を実行します。したがって、各フォームコンポーネントの提出関数はsubmitと命名するしかないです。
次に、フォームinput要素にバインドされ、チェックルールをパラメータとして書き込みます。このinput要素が焦点を失うと、現在の要素にバインディングされているイベントの論理が実行されます。これらのロジックは三つのステップに分けられています。もうコメントに書いてあります。具体的な実現を見てみます。
すべてのエラーメッセージをリセットします。

/**
 *         
 * @param el: HTMLElement，       input  
 */
const resetError = (el: HTMLElement) => {
 el.className = el.className.replace('input-error', '').trim();
 if ( el.parentNode ) {
 const ErrorNode = el.parentNode.querySelector('.error-tips');
 if (ErrorNode) {
  el.parentNode.removeChild(ErrorNode);
 }
 }
};

カスタムコマンドから入力されたチェックルールパラメータとフォーム入力の値を取得します。

// binding.value           ，      
for (const rule of binding.value) {
 //                  
 const { min, max, message, required, pattern } = rule;
 if ( min && InputEl.value.length < min ) {
 //        ，      
 validateError(InputEl, message);
 break;
 }
 if ( max && InputEl.value.length > max ) {
 validateError(InputEl, message);
 break;
 }
 if ( !!required && !InputEl.value ) {
 validateError(InputEl, message);
 break;
 }
 if ( pattern && !pattern.test(InputEl.value) ) {
 validateError(InputEl, message);
 break;
 }
 if ( rule && typeof rule === 'function' ) {
 rule(vNode.context, InputEl.value, validateError, InputEl);
 break;
 }
}

チェックが合っていません。エラー関数を実行します。

/**
 *         ， input-error           p         
 * @param el: HTMLElement，       input  
 * @param errorMsg: string，        
 */
const validateError = (el: HTMLElement, errorMsg: string) => {
 if (Array.prototype.includes.call(el.classList, 'input-error')) {
 //                 ，     
 return;
 } else {
 const errorNode = document.createElement('p');
 errorNode.className = 'error-tips';
 errorNode.textContent = errorMsg;
 if (el.parentNode) {
  //    input        p  ，       
  el.parentNode.appendChild(errorNode);
 }
 //    input        input-error  
 el.className += ' input-error';
 }
};

今は自分で実現したこのフォーム検証プラグインを大まかに言いました。具体的な使い方を見てみます。
3.カスタム検証命令v-validateParaams使用
まず検証規則ファイルを作成します。

// rules.ts
export const required = (message) => ({
 message,
 required: true
});
export const min = (message, length=3) => ({
 message,
 min: length
})
export const max = (message, length=15) => ({
 message,
 max: length
})
export const pattern = (message, reg) => ({
 message,
 pattern: reg
})
// form.vue
<template>
 <div>
 <div class="form-item">
  <label for="userEmail">   ：</label>
  <input id="userEmail" class='v-check' type="text" v-model="userName"
  v-validateParams="[inputNameRequired, inputNameMin, inputNameMax, inputNamePattern]">
 </div>
 <button class="btn" v-if="show" type="success" v-checkSubmit>  </button>
 </div>
</template>
<script lang='ts'>
import { Component, Vue, Prop } from 'vue-property-decorator';
import { max, min, required, name, pattern} from 'rules';

@Component({
 components: {},
})
export default class Auth extends Vue {
 private show: boolean = true;
 private userName: string = '';
 private inputNameMax = max('     20   ');
 private inputNameMin = min('     3   ');
 private inputNameRequired = required('      ');
 private inputNamePattern = pattern('           ', /^[a-zA-Z0-9_-]{4,16}$/);
 private submit() {
 alert('    ');
 }
}
</script>

この例を通して、検証ルールを導入し、vueのインスタンス中のデータを付与する必要があることが分かる。そしてテンプレートには、inputタグにv-checkクラス名を追加し、v-validateParaamsコマンドを使用してパラメータを入力する必要があります。ボタンの提出にはv-check Submit命令を呼び出す必要があります。このようにして、自分で開発したこのフォーム検証プラグインを使うことができます。
3.現在の方式に存在する問題
フォームチェックは使用できますが、いくつかの明白な問題があります。
1.jsとhtmlの結合度が高いため、プラグインはまた、dom要素を取得し、コンポーネントのhtmlテンプレートには、指定されたクラス名を追加する必要があります。
2.vueでdomで操作しても、vueの設計の考え方に合わないし、実現の仕方も優雅ではない。
3.検査規則のチェックロジックは命令定義時に書きました。プラグインコードを追加または削除するには変更が必要です。
4.提出命令は、現在のコンポーネント内に特定のdomが含まれているかどうかに基づいて、現在の検証状態を判断し、実行している関数名も命令論理に書いてあります。
既存のデモが自分のニーズに合わせて実装されているこのフォーム検証プラグインによって、開発の過程でこのような書き込みの問題が多いことが分かりました。合格したプラグインとは言えません。同時に自分のjavascriptのレベルがまだ低いということをはっきり認識しています。大きな進歩が必要です。
現在開発されているフォームプラグインの主な問題は、プラグインの検証状態をコンポーネントに戻す方法です。私たちはプラグインの中で一つのイベントハンドリング関数を維持して、検査規則を入力して検証してから、検査結果を直接コンポーネントに送ることができます。このようにして、大量のdom操作を避けることができます。このプラグインを早急に科学的かつ合理的に再構成する必要があります。
締め括りをつける
以上は小编が绍介したvueカスタムコマンドを使ってフォームを开発してプラグインvalidate.jsを検证するので、皆さんに助けを求めています。ここでも私たちのサイトを応援してくれてありがとうございます。