반복되는 비밀번호를 확인하는 AngularJs 메소드(2가지 유형)

이 글에서는 Anglejs에서 반복되는 비밀번호를 확인하는 두 가지 방법을 공유하겠습니다. 구체적인 방법은 다음과 같습니다.

첫 번째:

<label for="password">密码</label>
<input id="password" name="password" type="password" ng-model="user.password" required>
<label for="repassword">重复密码</label>
<input id="repassword" name="repassword" type="password" ng-model="repassword" required>
<span style="color:red" ng-show="user.password!=repassword">两次密码不一致</span>
<input type="submit" class="btn btn-primary btn-lg" value="SAVE" ng-disabled="submit(userForm)"/>
/*JS*/
app.controller("main",function($scope){
$scope.submit=function(ngFormController){
return ngFormController.$invalid; /*valid的取反*/
};
});

단순히 두 ng가 어디에 있는지 판단하는 것입니다. -models 는 값이 동일한지 여부에 관계없이 ng-show 명령으로 제어되는 정보가 표시되고, 그렇지 않으면 ng-show 명령으로 제어되는 정보가 표시됩니다. 숨겨진.

이 방법은 매우 간단하지만 더 심각한 결함이 있습니다. 이 "비밀번호 불일치"는 ngFormController 내부에 영향을 미치지 않습니다. 즉, ngFormController의 $invalid는 잘못된 비밀번호를 두 번 오류로 간주하지 않기 때문에 비밀번호가 두 번 틀려도 최종 제출 버튼을 클릭할 수 있습니다.

AngularJS 명령어 ng-maxlength 등을 참고하지만 $invalid 감지가 발생할 수 있으므로 위의 문제를 해결하려면 방법 중 하나가 검증하는 방법 중 하나라고 생각합니다. 비밀번호를 두 번 사용하세요.

/*指令创建*/
app.directive('equals',function(){
return{
require:'ngModel',
link:function(scope,elm,attrs,ngModelCtrl){
function validateEqual(myValue){
var valid = (myValue === scope.$eval(attrs.equals));
ngModelCtrl.$setValidity('equal',valid);
return valid ? myValue : undefined;
}
ngModelCtrl.$parsers.push(validateEqual);
ngModelCtrl.$formatters.push(validateEqual);
scope.$watch(attrs.equals,function(){
ngModelCtrl.$setViewValue(ngModelCtrl.$viewValue);
})
}
}
});
<!--html-->
<label for="password">密码</label>
<input id="password" name="password" type="password" ng-model="user.password" required>
<label for="repassword">重复密码</label>
<input id="repassword" name="repassword" type="password" ng-model="repassword" <!--注意这里将要使用我自定义的指令-->equals="user.password" required>
<span style="color:red" ng-show="user.password!=repassword">两次密码不一致</span>
<input type="submit" class="btn btn-primary btn-lg" value="SAVE" ng-disabled="submit(userForm)"/>

이렇게 첫 번째 방법의 판단과 함께 반복되는 비밀번호도 완벽하게 검증할 수 있습니다.