密碼字段

我試圖做一個密碼字段，符合以下標準：密碼字段

有效的密碼應該是6到24個符號長，並有至少一位數字。
當該字段包含無效密碼時，應始終具有.ng無效的類。

要使密碼符號可見我使用過的模型同步兩個輸入：

<form name="form" ng-app="myApp" ng-controller="Controller" novalidate>  
<label> 
    Password: 
    <input type="password" name="uPass" maxlength="24" ng-hide="formFlags.showpass" ng-model="user.pass" ng-required validate-pass /> 
    <input type="text" name="uPass" maxlength="24" ng-show="formFlags.showpass" ng-model="user.pass" ng-required validate-pass /> 
    <span class="message" ng-show="form.uPass.$dirty && form.uPass.$invalid">Must be from 6 to 24 symbols long ang contain at least one digit.</span> 
</label> 

<label> 
    <input type="checkbox" name="uShowPass" ng-model="formFlags.showpass" toggle-pass/>Show password 
</label>  
</form>

查看完整的代碼在這裏：http://jsfiddle.net/adept/9uCGQ/44/。

在這裏，我想做到以下幾點：

我輸入的密碼無效。輸入字段gets.ng無效類（紅色邊框）。
我點擊「顯示密碼」。輸入密碼爲，文本輸入可見。

問題是，直到我改變它的值才被驗證。如何在顯示後立即驗證它？

UPD：在版本1.2.x和更高版本的AngularJS中我的示例工作正常，該問題僅適用於較低版本。

來源

2014-01-16 adept

一件事需要注意的是，如果您希望將其用於字段驗證，則輸入的名稱必須是唯一的，否則將被覆蓋。您需要將uPass重命名爲文本字段，並在form.uPass中引用它們。$ dirty && form.uPass。$ invalid –

只需添加formatters.unshift，所以它也會查看模型更改，而不僅僅是查看。

編輯小提琴：

http://jsfiddle.net/9uCGQ/5/

添加代碼：

 ctrl.$formatters.unshift(function(viewValue) { 
      if (viewValue.length >= scope.formFlags.minpasslength && PASS_REGEXP.test(viewValue)) { 
       // it is valid 
       ctrl.$setValidity('pass', true); 
      } else { 
       // it is invalid 
       ctrl.$setValidity('pass', false); 
      } 
      // update model anyway to sync password fields 
      return viewValue; 
     });

更多關於NG控制器文檔的兩個屬性（解析器和格式化）：http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController

來源

2014-01-16 14:22:44

謝謝您的回答對我非常有用。 – adept

回答

相關問題