データのフォーマット検証について(フォームに限定されません)

3640 ワード

ネット上のデータ検証については主にフォームベースで、しかもJQと結合することが多く、個人的にはあまり好きではありません.最近はvueを書く項目が多く、vueベースのデータ検証プラグインも少なくありませんが、vueがなくても使えません.結合性が強すぎて、自分はカスタマイズ性の高いスタイルが好きです.以下は自分でカプセル化したコードで、まだ完全なプラグインではありませんが、もう使えます.
目的は次のとおりです.
  • JQやVue、Recatなどに依存しない
  • には、必須、数値、メールボックスフォーマットなどの
  • の一般的な検証タイプが組み込まれています.
  • 間違った文字にはテンプレートがあり、カスタマイズされた
  • もあります.
  • エラーの処理結果
  • をカスタマイズ可能
  • カスタム'正規表現
  • 最も重要なのは、スタイルや他のファイル
  • を導入する必要がなく、簡単で使いやすいことです.
    現在の完了状況:
  • は上記の基本要求
  • に達した.
  • カスタム正規表現
  • を完了
  • 組み込み検証フォーマットの完了:必須--requiredメール--Email携帯電話--phoneパスワード--password
  • 使用方法:
    使用するファイルにverificationを導入する.jsファイル
     import {getData} from '@/libs/verification'
    
        let T=getData(      ,{
            msg:'        ',
            Regular:/^[0-9]*$/, //         
            callback:function (errMsg) {  //          
              console.log(errMsg)
            }
          })
       let F=getData(      ,{
            Type:['required','password'],, //      
            callback:function (errMsg) {  //          
              console.log(errMsg)
            }
          })
      //    true/false
    
    

    注意:埋め込みタイプとカスタム正規表現の両方を欠落させることはできません.2つの方法で1を選択する必要があります.つまり、RegularとTypeというパラメータ2を選択する必要があります.
    コアコード:verification.js
    /**
     *  Data:      
     *  config:      
     * */
    export function verify(Data = null, config = {}) {
    
      if (Data == null) {
        throw new Error('        ');
        return false
      }
    
      if (!(config.Type || null) && !config.Regular) {
        throw new Error('  Type   Regular      ');
        return false
      }
    
    
      //      
      if (config.Type) {
        return ownType(Data, config)
      }
    
      //       
      if (config.Regular) {
        if (!config.Regular.test(Data)) {
          showError(config.msg || '       ', config.callback)
          return false
        }
      }
    
      return true//       false,       true
    
    }
    
    
    /*        */
    function ownType(Data, config) {
      for (let item of config.Type) {
        if (ownTypeList[item]) {
          if (!ownTypeList[item](Data, config)) {
            return false
            break;
          }
        } else {
          throw new Error(item + '        ');
          return false
          break;
        }
      }
      //    ,        ,        false
    }
    
    
    /*        */
    function showError(errMsg, callback) {
      if (!callback) {
        console.log(errMsg)
      } else {
        callback(errMsg);
      }
    }
    
    let ownTypeList = {
      /*      -  */
      required: function (Data, config) {
        let errMsg = '      ';
        let regu = "^[ ]+$";
        let re = new RegExp(regu);
        if (re.test(Data)) {
          showError('      ', config.callback)
          return false
        }
    
        if (Data === '' || Data === undefined || Data === null) {
          showError(errMsg, config.callback)
          return false
        }
        return true
      },
      /*      -    */
      Email: function (Data, config) {
        let errMsg = '          '
        let pattern = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
        if (pattern.test(Data)) {
          return true
        } else {
          showError(errMsg, config.callback)
          return false
        }
      },
      /*      -      */
      phone: function (Data, config) {
        let errMsg = '            '
        let pattern = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
        if (pattern.test(Data)) {
          return true
        } else {
          showError(errMsg, config.callback)
          return false
        }
      },
      password: function (Data, config) {
        let errMsg = '    :    ,   6~18  ,      、      '
        let pattern = /^[a-zA-Z]\w{5,17}$/;
        if (pattern.test(Data)) {
          return true
        } else {
          showError(errMsg, config.callback)
          return false
        }
      },
    }