在angularjs材質設計中的輸入驗證

的情況下1：

<md-input-container class="md-block"> 
    <label>Client Email</label> 
    <input required type="email" name="clientEmail" ng-model="project.clientEmail"   minlength="10" maxlength="20" ng-pattern="/^[email protected]+\..+$/" /> 
    <div ng-messages="projectForm.clientEmail.$error" role="alert"> 
     <div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']"> 
      Your email must be between 10 and 20 characters long and look like an e-mail address. 
     </div> 
    </div> 
</md-input-container>

這裏所有類型的錯誤，我們都顯示同樣的信息。是可能有多個消息並相應地顯示它們。例如 - 當空{該字段是必需的。} 當用戶開始然後鍵入直到小於10炭{需要最小10炭。} 當炭化長度變爲超過20 {最大20字符被允許}

案例2：

<md-input-container class="md-block"> 
    <label>Password</label> 
    <input required type="password" name="password" ng-model="project.password"   minlength="6" maxlength="8" ng-pattern="/^[0-9]{6-8}$/" /> 
    <div ng-messages="projectForm.password.$error" role="alert"> 
     <div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']"> 
      Your password must be between 6 and 8 characters long. 
     </div> 
    </div> 
</md-input-container> 


<md-input-container class="md-block"> 
    <label>Repeat Password</label> 
    <input required type="password" name="password2" ng-model="project.password2"   minlength="6" maxlength="8" ng-pattern="/^[email protected]+\..+$/" /> 
    <div ng-messages="projectForm.password2.$error" role="alert"> 
     <div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']"> 
      Your password must be between 6 and 8 characters long. 
     </div> 
    </div> 
</md-input-container>

有沒有什麼辦法，所以我們可以配合其他領域當前字段值。基本上這是爲了密碼和確認密碼。我們把所有的檢查放在密碼字段中。在密碼2中，我只需要檢查它是否與密碼相同，並顯示消息{確認密碼與密碼不同}，直到兩個匹配。

來源

2016-03-02 Devesh Agrawal

回答案例1：是的，可以有多條消息並相應地顯示它們。 PLUNKER：DEMO

<form name="form"> 
     <div class="form-group" ng-class="{'has-error': form.telephone.$dirty && form.telephone.$invalid}"> 
      <input id="Text5" 
        name="telephone" 
        placeholder="Enter phone number (only digits or spaces)" 
        type="text" 
        ng-model="ManageDetailsCtrl.ManageDetails.Phone" 
        class="form-control" 
        style="width: 100%;" 
        ng-minlength="11" 
        ng-maxlength="15" 

        required> 
      <div ng-show="form.telephone.$dirty && form.telephone.$invalid"> 
       <span ng-show="form.telephone.$error.required" class="help-block">can't be blank</span> 
       <span ng-show="form.telephone.$error.minlength" class="help-block"> is too short (min 11 characters)</span> 
       <span ng-show="form.telephone.$error.maxlength" class="help-block"> is too long (max 15 characters)</span> 
      </div> 
      </div> 
    </form>

來源

2016-03-02 11:54:18 Ved

在angularjs材質設計中的輸入驗證

回答

相關問題