[英]Make another field invalid while validating
我正在處理一個標准的“更改您的密碼”表格,其中有兩個字段:password1和password2。 這兩個字段僅用於驗證用戶輸入了正確的密碼,並且它們需要包含相同的文本。
我添加了一條指令來驗證密碼,但是現在我想要的是,如果兩個字段彼此之間不相等,則使兩個字段都變得無效,而不僅僅是我輸入的字段無效。我能這樣做嗎?
我嘗試在兩個ngmodels上調用$ setValidity,但是我沒有找到從一個ctrl。$ parsers.unshift或指令鏈接函數調用$ setValidity或我當前未驗證的其他字段的方法。 我真的迷路了。
非常感謝!
我的指令是:
myApp.directive('validatepassword', function () {
return {
require: 'ngModel',
restrict: 'A', // only activate on element attribute
link: function (scope, elm, attrs, ngModel) {
ngModel.$parsers.unshift(function (viewValue) {
var valPasswordValue = attrs.validatepassword;
var otherPassword = $('#' + valPasswordValue)[0].value;
var valido = scope.validatePassword(viewValue, otherPassword);
ngModel.$setValidity('password', valido);
return viewValue;
});
}
};
});
我在代碼中以這種方式使用:
<div class="control-group">
<label class="control-label" for="inputPassword1">Password</label>
<div class="controls">
<input id="inputPassword1" name="inputPassword1" type="password" ng-model="context.Password" required validatepassword="inputPassword2"/>
<span class="alert-danger invalid-form" ng-show="!addEditForm.inputPassword1.$valid">(*)</span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword2">Repeat Password</label>
<div class="controls">
<input id="inputPassword2" name="inputPassword2" type="password" ng-model="context.Password2" required validatepassword="inputPassword1"/>
<span class="alert-danger invalid-form" ng-show="!addEditForm.inputPassword2.$valid">(*)</span>
</div>
</div>
關於如何立即更改兩個字段的任何想法?
非常感謝!
要從另一個字段的一個字段觸發驗證方法,我必須手動設置另一個字段的值。 您可以在ng-change內部執行此操作:
ng-change="addEditForm.inputPassword2.$setViewValue(addEditForm.inputPassword2.$viewValue)"
這樣做時,它應該在兩個密碼字段中觸發驗證。
您也可以像這樣訪問指令內部的字段:
scope.addEditForm.inputPassword1
因此,您可以擺脫指令內部的jQuery訪問。
這是在兩個字段上用於密碼驗證的HTML部分:
<div class="control-group">
<label class="control-label" for="inputPassword1">Password</label>
<div class="controls">
<input id="inputPassword1" name="inputPassword1" type="password" ng-model="context.Password" required
validatepassword="inputPassword2" ng-change="addEditForm.inputPassword2.$setViewValue(addEditForm.inputPassword2.$viewValue)"/>
<span class="alert-danger invalid-form" ng-show="!addEditForm.inputPassword1.$valid">(*)</span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword2">Repeat Password</label>
<div class="controls">
<input id="inputPassword2" name="inputPassword2" type="password" ng-model="context.Password2" required
validatepassword="inputPassword1" ng-change="addEditForm.inputPassword1.$setViewValue(addEditForm.inputPassword1.$viewValue)"/>
<span class="alert-danger invalid-form" ng-show="!addEditForm.inputPassword2.$valid">(*)</span>
</div>
</div>
Angular-UI有一個內置的驗證器,您可以將其用於各種目的,這里有一個確切的密碼示例,您可以檢查並確認密碼: https : //github.com/angular-ui/ui-utils/blob/ master / modules / validate / demo / index.html#L29
請檢查此小提琴http://jsfiddle.net/vigneshvdm/Dnt7w/5/
你可以做這樣的事情
var password=$("#telephone").val();
var reenteredpassword=$("#mobile").val();
if(password==reenteredpassword)
{
$("#required").html("Passwords Match");
}
else
{
$("#required").html("Passwords do not Match");
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.