Heim > Artikel > Web-Frontend > JavaScript-Entwurfsmuster – Strategiemuster-Eingabevalidierung_Javascript-Kenntnisse

JavaScript-Entwurfsmuster – Strategiemuster-Eingabevalidierung_Javascript-Kenntnisse

WBOYOriginal: 2016-05-16 15:29:131306Durchsuche

Das Strategiemuster definiert eine Familie von Algorithmen und kapselt sie separat, sodass sie untereinander ersetzt werden können. Dieses Muster macht die Algorithmusänderungen unabhängig von den Kunden, die die Berechnung verwenden.

Definieren Sie zunächst ein einfaches Eingabeformular:

<!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>

Im Allgemeinen müssen bei der Übermittlungsaktion nach dem Bearbeiten der Informationen auf der Seite die Eingabeinformationen überprüft werden. Sie werden feststellen, dass viel Code, der für die Überprüfung verantwortlich ist, in der Übermittlungsfunktion oder in einer unabhängigen Prüffunktion geschrieben ist.

Zum Beispiel wie unten.

 $(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;
        }
      }

Diese Schreibmethode kann die funktionalen Anforderungen durchaus erfüllen, es treten jedoch mehrere Probleme auf:

1. Wenn ich es auf anderen Seiten verwenden möchte, muss ich den Code kopieren. Die sogenannte Wiederverwendung wird zum Kopieren, und es wird eine Menge Duplikate des Codes geben. Bessere werden den Prüfcode klassifizieren und verpacken, aber es wird mehr Duplikate geben.

2. Wenn ich eine Eingabeüberprüfung hinzufügen möchte, muss ich die Übermittlungsfunktion direkt ändern. Diese Funktion wird aufgebläht und zerstört das Prinzip „Öffnen und Schließen“.

3. Wenn Sie die Übermittlungsfunktion ändern, müssen Sie alle Tests des Funktionsdesigns abdecken, da Sie nicht wissen, wann fehlerhafte Änderungen oder unbekannte Situationen auftreten.

Transformationsschritte:

1. Behandeln Sie jede Verifizierungslogik als Verifizierungsstrategie und kapseln Sie jede Verifizierungsstrategiefunktion. Die Funktionsparameter sollten konsistent sein und können DOM-Elemente, verifizierte Werte, Fehlermeldungen und benutzerdefinierte Parameter akzeptieren.

2. Definieren Sie den Validator. Sie können die Validierungsstrategiefunktion importieren oder hinzufügen.

3. Der Validator stellt eine Überprüfungsmethode zum Aufrufen während der Überprüfung bereit und ruft intern eine bestimmte Überprüfungsstrategiefunktion auf.

4. Überprüfen Sie den Anruf.

Schritt 1.

Betrachten Sie jedes if als Überprüfungsgeschäftsregel, behandeln Sie jede Geschäftsregel als separate Strategiefunktion und kapseln Sie alle Strategiefunktionen in einem Strategieobjekt.

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

Die ersten drei Parameter aller Funktionen sind konsistent und erforderlich und geben das überprüfte DOM-Element, die Fehlermeldung und den überprüften Wert an. Der vierte Parameter beginnt mit den eigenen Überprüfungsregeln der Funktion, um die benutzerdefinierten Parameter zu bestimmen.

Die Methode „buildInvalidObj“ wandelt lediglich die ersten drei Parameter in ein Fehlerobjekt um und gibt dieses zurück, solange die Überprüfung fehlschlägt.

Nach dem Prinzip der Abhängigkeitsumkehr sollten High-Level-Module nicht von Low-Level-Modulen abhängen, sodass sie vom Aufrufer der Verifizierung nicht direkt verwendet werden können.

Kapselung und Abstraktion durch Validatoren.

Schritt 2:

Definieren Sie den Validator. Sie können alle Verifizierungsstrategien darin importieren oder die Verifizierungsstrategiefunktionen separat hinzufügen.

//输入验证器
      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;
      };

Schritt 3:

Verifizierungsmethode hinzufügen, um externe Anrufe anzunehmen.

Die erste Parameterregel ist auf eine Überprüfungsregel festgelegt, z. B. „minLength:6“. Der folgende Code generiert einen Aufruf der spezifischen Strategiefunktion. Der Aufruf wird in den Cache verschoben und wartet darauf, gemeinsam aufgerufen zu werden.

„:6“ gibt die Parameter an, die von der Strategiefunktion gemäß ihren eigenen Regeln angepasst werden.

  //添加验证方法
      //参数:
      // 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);
        });
      };

Alle Verifizierungen über eine Prüffunktion aufrufen. und falsche Ergebnisse zurückgeben.

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

Schritt 4:

Wenn eine Verifizierung erforderlich ist, erstellen Sie zunächst ein neues Validatorobjekt.

var validators = new InputValidators();

Importieren Sie das Objekt, das die Verifizierungsstrategiefunktion enthält, oder fügen Sie die Verifizierungsstrategiefunktion separat hinzu.

Es ist ersichtlich, dass unterschiedliche Verifizierungsstrategien vorab in das Strategieobjekt eingekapselt oder je nach tatsächlicher Situation sofort hinzugefügt werden können.

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

Fügen Sie dann die zu überprüfende Strategie, das überprüfte DOM-Element, die Fehlermeldung und den überprüften Wert in den Validator ein, indem Sie eine Überprüfungsmethode hinzufügen. Dadurch wird der direkte Aufruf des Strategieobjekts vermieden und die Kopplung verringert.

Rufen Sie die Validierungsprüfung an, um alle Überprüfungen durchzuführen.

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

check gibt ein Fehlerobjekt zurück, um nach der Prüfung einheitlich Eingabeaufforderungsvorgänge für DOM-Elemente auszuführen, z. B. das Festlegen des Fokus, das Auswählen von Inhalt oder das Umschließen einer roten Stilebene außerhalb des Eingabefelds.

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

An diesem Punkt können wir sehen, dass wir uns durch die Änderung des Strategiemodus bei der Eingabeüberprüfung nur noch darum kümmern müssen, welche Überprüfungsregel verwendet werden soll und welche Art von Eingabeaufforderungsinformationen verwendet werden sollen. Die Implementierungsdetails werden nicht mehr offengelegt , was für den Aufruf und die anschließende Erweiterung und Komponentisierung praktisch ist.

Alle Codes:

Das Obige ist der gesamte Inhalt des vom Herausgeber eingeführten Javascript-Designmusters – Überprüfung der Eingabe von Strategiemustern.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：JSON-Methode von jquery, um eine sekundäre Verknüpfung von data_jquery zu erreichenNächster Artikel：JSON-Methode von jquery, um eine sekundäre Verknüpfung von data_jquery zu erreichen

In Verbindung stehende Artikel

Mehr sehen