이 글에서는 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)"/>
이렇게 첫 번째 방법의 판단과 함께 반복되는 비밀번호도 완벽하게 검증할 수 있습니다.