> 웹 프론트엔드 > JS 튜토리얼 > 반복되는 비밀번호를 확인하는 AngularJs 메소드(2가지 유형)

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

高洛峰
풀어 주다: 2016-12-05 11:19:01
원래의
1371명이 탐색했습니다.

이 글에서는 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(&#39;equals&#39;,function(){
return{
require:&#39;ngModel&#39;,
link:function(scope,elm,attrs,ngModelCtrl){
function validateEqual(myValue){
var valid = (myValue === scope.$eval(attrs.equals));
ngModelCtrl.$setValidity(&#39;equal&#39;,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)"/>
로그인 후 복사

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


관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿