Modèle de conception JavaScript--Compétences de validation d'entrée de modèle de stratégie

Le modèle de stratégie définit une famille d'algorithmes et les encapsule séparément afin qu'ils puissent être remplacés les uns par les autres. Ce modèle rend les changements d'algorithme indépendants des clients qui utilisent le calcul.

Définissez d'abord un formulaire de saisie simple :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-">
    <style>
      .form{
        width: px;
        height: px;
        #margin: px auto;
      }
      .form-item-label{
        width:px;
        text-align: right;
        float: left;
      }
      .form-item-input{
        float: left;
      }
      .form-item{
        width: % ;
        height: px;
        line-height: px;
      }
    </style>
  </head>
  <body>
    <div class='form'>
      <div class="form-item">
        <div class='form-item-label'><span>用户名：</span></div>
        <div class='form-item-input'><input id='userName' name='用户名' type="text"></div>
      </div>
      <div class="form-item" >
        <div class='form-item-label'><span>密码：</span></div>
        <div class='form-item-input'><input id='password' name='密码' type="text"></div>
      </div>
      <div class="form-item" >
        <div class='form-item-label'><span>确认密码：</span></div>
        <div class='form-item-input'><input id='repassword' name='密码确认' type="text"></div>
      </div>
      <div class="form-item" >
        <div class='form-item-label'><span>邮箱：</span></div>
        <div class='form-item-input'><input id='mail' name='邮箱' type="text" ></div>
      </div>
    </div>
    <br>
    <button id='submit' >提交</button>
    <script type='text/javascript' src="../reference/jquery-...min.js"></script>
  </body>
</html>

Copier après la connexion

Généralement, dans l'action de soumission après avoir modifié les informations sur la page, les informations saisies doivent être vérifiées. Vous verrez qu'une grande partie du code responsable de la vérification est écrite dans la fonction de soumission ou dans une fonction de vérification indépendante.

Par exemple, comme ci-dessous.

 $(document).ready(function(){
        $('#submit').bind('click', doSubmit);
      });
      function doSubmit(){
        var eleUserName = document.getElementById('userName');
        if(eleUserName.value === '') {
          alert('用户名不能为空');
          return;
        }
        if(eleUserName.length < 6) {
          alert('用户名长度不能少于6个字符');
          return;
        }
        if(eleUserName.length > 6) {
          alert('用户名长度不能多于20个字符');
          return;
        }
      }

Copier après la connexion

Cette méthode d'écriture peut certainement répondre aux exigences fonctionnelles, mais il y aura plusieurs problèmes :

1. Si je veux l'utiliser sur d'autres pages, je dois copier le code. La soi-disant réutilisation devient une copie, et il y aura beaucoup de duplication du code. Les meilleurs classeront et conditionneront le code de contrôle, mais il y aura davantage de duplications.

2. Si je souhaite ajouter une vérification d'entrée, alors je dois modifier directement la fonction de soumission. Cette fonction sera gonflée et détruira le principe "d'ouverture et de fermeture".

3. Si vous modifiez la fonction de soumission, vous devez couvrir tous les tests de conception de la fonction, car vous ne savez pas quand des changements erronés ou des situations inconnues se produiront.

Étapes de transformation :

1. Traitez chaque logique de vérification comme une stratégie de vérification et encapsulez chaque fonction de stratégie de vérification. Les paramètres de la fonction doivent être cohérents et peuvent accepter des éléments DOM, des valeurs vérifiées, des messages d'erreur et des paramètres personnalisés.

2. Définissez le validateur, vous pouvez importer la fonction de stratégie de validation ou l'ajouter.

3. Le validateur fournit une méthode de vérification pour appeler pendant la vérification et appelle en interne une fonction de stratégie de vérification spécifique.

4. Vérifiez l'appel.

Étape 1.

Considérez chaque if comme une règle métier de vérification, traitez chaque règle métier comme une fonction stratégique distincte et encapsulez toutes les fonctions stratégiques dans un objet stratégique.

 var validationStrategies = {
        isNoEmpty: function(element, errMsg, value) {
          if(value === '') {
            return this.buildInvalidObj(element, errMsg, value );
          }
        },
        minLength: function(element, errMsg, value, length) {
          if(value.length < length){
            return this.buildInvalidObj(element, errMsg, value);
          }
        },
        maxLength: function(element, errMsg, value, length) {
          if(value.length > length){
            return this.buildInvalidObj(element, errMsg, value);
          }
        },
        isMail: function(element, errMsg, value, length) {
          var reg = /^(\w-*\.*)+@(\w-&#63;)+(\.\w{2,})+$/;
          if(!reg.test(value)){
            return this.buildInvalidObj(element, errMsg, value);
          }
        }
      };

Copier après la connexion

Les trois premiers paramètres de toutes les fonctions sont cohérents et requis, indiquant l'élément DOM vérifié, le message d'erreur et la valeur vérifiée. Le quatrième commence par les propres règles de vérification de la fonction pour déterminer les paramètres personnalisés.

La méthode "buildInvalidObj" convertit simplement les trois premiers paramètres en un objet d'erreur et le renvoie. Cet objet d'erreur sera renvoyé tant que la vérification échoue.

Selon le principe d'inversion de dépendance, les modules de haut niveau ne doivent pas dépendre des modules de bas niveau, ils ne peuvent donc pas être utilisés directement par l'appelant de vérification.

Encapsulation et abstraction via des validateurs.

Étape 2 :

Définissez le validateur, vous pouvez y importer toutes les stratégies de vérification, ou vous pouvez ajouter les fonctions de stratégie de vérification séparément.

//输入验证器
      function InputValidators(){
        this.validators = [];
        this.strategies = {};
      }
      //从策略对象导入验证策略函数
      //参数:
      // strategies: 包含各种策略函数的对象
      InputValidators.prototype.importStrategies = function(strategies) {
        for(var strategyName in strategies) {
          this.addValidationStrategy(strategyName, strategies[strategyName]);
        }
      };
      //添加验证策略函数
      //参数:
      // name: 策略名称
      // strategy: 策略函数
      InputValidators.prototype.addValidationStrategy = function(name, strategy){
        this.strategies[name] = strategy;
      };

Copier après la connexion

Étape 3 :

Ajoutez une méthode de vérification pour accepter les appels externes.

La première règle de paramètre est définie sur une règle de vérification, telle que "minLength:6". Le code suivant générera un appel à la fonction de stratégie spécifique. L'appel sera poussé dans le cache et attendra d'être appelé ensemble.

":6" indique les paramètres personnalisés par la fonction stratégie selon ses propres règles.

  //添加验证方法
      //参数:
      // rule: 验证策略字符串
      // element: 被验证的dom元素
      // errMsg: 验证失败时显示的提示信息
      // value: 被验证的值
      InputValidators.prototype.addValidator = function(rule, element, errMsg, value) {
        var that = this;
        var ruleElements = rule.split(":");
        this.validators.push(function() {
          var strategy = ruleElements.shift();
          var params = ruleElements;
          params.unshift(value);
          params.unshift(errMsg);
          params.unshift(element);
          return that.strategies[strategy].apply(that, params);
        });
      };

Copier après la connexion

Appelez toutes les vérifications via une fonction de contrôle. et renvoie des résultats incorrects.

   //开始验证
      InputValidators.prototype.check = function() {
        for(var i = 0, validator; validator = this.validators[i++];){
          var result = validator();
          if(result) {
            return result;
          }
        }
      };

Copier après la connexion

Étape 4 :

Lorsque la vérification est requise, créez d'abord un nouvel objet validateur.

var validators = new InputValidators();

Copier après la connexion

Importez l'objet contenant la fonction de stratégie de vérification ou ajoutez la fonction de stratégie de vérification séparément.

On peut voir que différentes stratégies de vérification peuvent être pré-encapsulées dans l'objet de stratégie, ou peuvent être ajoutées immédiatement en fonction de la situation réelle.

  validators.importStrategies(validationStrategies);
        validators.addValidationStrategy('isEqual', function(element, errMsg, value1, value2) {
          if(value1 !== value2) {
            return this.buildInvalidObj(element, errMsg, value1 );
          }
        });

Copier après la connexion

Ajoutez ensuite la stratégie qui doit être vérifiée, l'élément DOM vérifié, le message d'erreur et la valeur vérifiée dans le validateur en ajoutant une méthode de vérification. Cela évite d'appeler directement l'objet de stratégie et réduit le couplage.

Appelez le chèque du validateur pour effectuer toutes les vérifications.

var eleUserName = document.getElementById('userName');
validators.addValidator('isNoEmpty', eleUserName, '用户名不能为空', eleUserName.value);
validators.addValidator('minLength:6', eleUserName, '用户名的字符个数必须是6到20个', eleUserName.value);
validators.addValidator('maxLength:20', eleUserName, '用户名的字符个数必须是6到20个', eleUserName.value);
var elePassword = document.getElementById('password');
validators.addValidator('isNoEmpty', elePassword, '密码不能为空', elePassword.value);
validators.addValidator('minLength:6', elePassword, '密码的字符个数必须是6到20个', elePassword.value);
validators.addValidator('maxLength:20', elePassword, '密码的字符个数必须是6到20个', elePassword.value);
var eleRepassword = document.getElementById('repassword');
validators.addValidator('isNoEmpty', eleRepassword, '确认密码不能为空', eleRepassword.value);
validators.addValidator('minLength:6', eleRepassword, '确认密码的字符个数必须是6到20个', eleRepassword.value);
validators.addValidator('maxLength:20', eleRepassword, '确认密码的字符个数必须是6到20个', eleRepassword.value);
validators.addValidator('isEqual:' + elePassword.value, eleRepassword, '两次密码不一致', eleRepassword.value);
var eleMail = document.getElementById('mail');
validators.addValidator('isNoEmpty', eleMail, '邮箱不能为空', eleMail.value);
validators.addValidator('isMail', eleMail, '邮箱不是一个有效的格式', eleMail.value);

Copier après la connexion

check renvoie un objet d'erreur. Nous pouvons utiliser cet objet pour effectuer uniformément des opérations d'invite sur les éléments DOM après la vérification, telles que définir le focus, sélectionner le contenu ou envelopper une couche de style rouge à l'extérieur de la zone de saisie.

var result = validators.check();
        if(result){
          alert(result.errMsg);
          result.element.focus();
          result.element.select();
          return false;
        }

Copier après la connexion

À ce stade, nous pouvons voir que grâce au changement de mode stratégique, lors de la vérification des entrées, nous n'avons plus qu'à nous soucier de la règle de vérification à utiliser et du type d'informations d'invite à utiliser. Les détails de mise en œuvre ne sont plus exposés. , ce qui est pratique pour l'appel et le suivi ultérieur.

Tous les codes :

Ce qui précède est l'intégralité du contenu du modèle de conception javascript introduit par l'éditeur - vérification de l'entrée du modèle de stratégie. J'espère que vous l'aimerez.

Modèle de conception JavaScript--Compétences de validation d'entrée de modèle de stratégie_javascript