將自定義驗證添加到輸入字段

我想在我的文本輸入類型上添加自定義驗證。我正在使用Angular，順便說一句。將自定義驗證添加到輸入字段

這裏是代碼：

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

我想補充2個驗證：1）它不能爲空2）最小長度的文本是6個字符。我希望在按下我的Web應用程序上的提交按鈕時觸發此驗證。

任何意見是讚賞！

來源

2016-03-29 Kahsn

'如果（string.length減> 5）{}'？至於什麼時候被調用，你還沒有提供和JS代碼，所以你自己用這一點。 – DBS

您可以通過HTML輸入標籤屬性來實現此目的。

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

required屬性告訴輸入不能爲空

pattern="^.{5,}"防止輸入爲比6個字符短。

如果您<input>是內<form>像這樣的審定會被觸發：

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

如果您想了解更多的話題是指MDN

來源

2016-03-29 23:05:55

一個很好的解決方案，但在幾個瀏覽器（Safari和較老的IE，如果你不幸處理它們）有點不可靠：http://caniuse.com/#search=pattern我個人還是堅持使用JS驗證，直到Safari趕上。 – DBS

試試這個希望它會工作

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

控制器：

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

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

      } 
     } else { 
      $scope.errormessage = "Textfield Empty" 
     } 
    };

來源

2016-03-30 03:05:08

爲了驗證在打字時使用NG-MINLENGTH，

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

要僅按壓按鈕後驗證，

<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()"/>

在您的控制器：

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

來源

2016-03-30 05:24:20

將自定義驗證添加到輸入字段

回答

相關問題