在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材质设计中的输入验证

回答

相关问题