Angualrjs 폼 검증 의 두 가지 방식(초점 검증 을 잃 고 인증 제출 을 클릭)

AngularJS 는 폼 검증 을 제 공 했 지만 검증 과정 에서 상호작용 체험 이 좋 지 않 습 니 다.예 를 들 어 비밀 번 호 를 재 설정 하고 비밀 번 호 를 반복 할 때 한 번 에 입력 하면 비밀번호 가 정확 하지 않다 는 것 을 알 립 니 다.현 재 는 두 가지 방법 을 정리 하여 참고 할 수 있 습 니 다.
1.인증 제출 을 클릭 합 니 다.

<form action="" class="form-horizontal col-md-9" name="reset_pwd" ng-submit="resetPwd()">
  <div class="form-group">
    <label class="col-sm-2 control-label">  </label>
    <div class="col-sm-8">
      <input type="password" name="mycompwd" class="form-control" ng-model="mycompwd" placeholder="     ">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">    </label>
    <div class="col-sm-8">
      <input type="password" name="resetmycompwd" class="form-control" ng-model="resetmycompwd" placeholder="      " required>
    </div>
    <span style="color:red" ng-show="mycompwd!=resetmycompwd && reset_pwd.resetmycompwd.$dirty && reset_pwd.submitted
    ">     </span>
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-primary" >  </button>
    <button type="button" class="btn btn-default" ng-click="resetpwd_cancle()">  </button>
  </div>
</form>

사용자 가 폼 을 제출 하려 고 할 때,역할 영역 에서 submitted 값 을 캡 처 한 다음 폼 내용 을 검증 하고 오류 정 보 를 표시 할 수 있 습 니 다.
JS 코드

$scope.submitted = false;
$scope.resetPwd = function(){
  console.log(666);
  if($scope.reset_pwd.$valid && $scope.mycompwd == $scope.resetmycompwd){
    console.log('    ,      ');
  }else{
    $scope.reset_pwd.submitted = true;
  }
}

직접 측정 할 수 있다.
두 번 째 초점 상실 검증

<form action="" class="form-horizontal col-md-9" name="reset_pwd" ng-submit="resetPwd()">
  <div class="form-group">
    <label class="col-sm-2 control-label"> &nbsp&nbsp </label>
    <div class="col-sm-8">
      <input type="password" name="mycompwd" class="form-control" ng-model="mycompwd" placeholder="     ">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">    </label>
    <div class="col-sm-8">
      <input ng-focus type="password" name="resetmycompwd" class="form-control" ng-model="resetmycompwd" placeholder="      " required>
    </div>
    <span style="color:red" ng-show="mycompwd!=resetmycompwd && reset_pwd.resetmycompwd.$dirty
      && !reset_pwd.resetmycompwd.$focused
    ">     </span>
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-primary" >  </button>
    <button type="button" class="btn btn-default" ng-click="resetpwd_cancle()">  </button>
  </div>
</form>

JS 코드

app.directive('ngFocus',[function(){
  var focusClass = 'ng-focused';
  return{
    restrict:'AE',
    require:'ngModel',
    link:function(scope,element,attrs,ctrl){
      ctrl.$focused = false;
      element.bind('focus',function(e){
        element.addClass(focusClass);
        scope.$apply(function(){
          ctrl.$focused = true;
        });
        element.bind('blur',function(e){
          element.removeClass(focusClass);
          scope.$apply(function(){
            ctrl.$focused = false;
          });
        });
      })
    }
  };
}]);

HTML 에 빨간색 이 표 시 된 곳 을 주의 하 세 요.바로 두 가지 방법 을 구분 하 는 관건 이다.
위 에서 말 한 것 은 편집장 이 소개 한 Angualrjs 폼 검증 의 두 가지 방식(초점 검증 을 잃 고 클릭 하여 검증 을 제출)입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 은 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!