Hinzufügen einer benutzerdefinierten Validierung zum Eingabefeld

Question

Ich versuche, eine benutzerdefinierte Validierung für meinen Texttyp der Eingabe hinzuzufügen. Ich benutze Angular, übrigens.

Hier Code:

<div class="form-group"> 
    <label class="control-label">text</label> 
    <input type="text" name="text" class="form-control" id="text_test" ng-blur="saveProgress()" ng-model="formData.text" placeholder="Any text" required> 
    <p class="form-group-note"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
    </p> 
</div> 

Ich möchte 2 Validierungen hinzufügen: 1) Es kann nicht für den Text ist 6 Zeichen leer 2) Min-Länge sein. Ich möchte, dass diese Validierung ausgelöst wird, wenn die Schaltfläche "Senden" in meiner Webanwendung gedrückt wird.

Jeder Rat wird geschätzt!

Answer 1

Sie können dies mit HTML-Eingabe-Tag-Attributen erreichen.

<input type="text" pattern="^.{5,}" required> 

required Attribut sagt, dass die Eingabe nicht

pattern="^.{5,}" Eingang kürzer sein verhindert als 6 Zeichen leer sein.

Diese Validierung ausgelöst wird, wenn Ihr <input> in einem ist <form> wie:

<form action=""> 
    <input type="text" pattern="^.{5,}" required> 
    <input type="submit"> 
</form> 

Wenn Sie diese Hoffnung MDN

Answer 2

Versuchen Sie beziehen möchten mehr zum Thema lesen, wird es funktionieren

<input type="text" name="text" class="form-control" id="text_test" ng-blur="saveProgress()" ng-model="formData.text" placeholder="Any text" required> 

Steuerung:

Answer 3

Zur Validierung während der Verwendung ng-minlength eingeben,

<input type="text" name="text" class="form-control" id="text_test" ng-blur="saveProgress()" ng-model="formData.text" placeholder="Any text" required="required" ng-minlength="6">

nur Zur Validierung nach Drücken der Taste

<input type="text" name="text" class="form-control" id="text_test" ng-blur="saveProgress()" ng-model="formData.text" placeholder="Any text"> 
 

 

 
<button ng-click="submit()"/>

auf dem Controller:

$scope.submit = function() { 
 
     if ($scope.formData.text) { 
 
      if ($scope.formData.text.length >= 6) { 
 

 
       //save code 
 
      } else { 
 
       $scope.errormessage = "Min length should be greater than 5" 
 

 
      } 
 
     } else { 
 
      $scope.errormessage = "Text field is required" 
 
     } 
 
    };