Angualrjs中表单验证的方式有哪些-创新互联

这篇文章主要介绍Angualrjs中表单验证的方式有哪些，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

目前创新互联建站已为上1000家的企业提供了网站建设、域名、网站空间、网站运营、企业网站设计、盐津网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

AngularJS提供了表单验证，但是验证的过程交互体验很不好，比如重设密码，重复密码的时候一键入就会提示密码不正确，现整理了两种方法，仅供借鉴。

一，点击提交验证

<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  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  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;
          });
        });
      })
    }
  };
}]);

以上是“Angualrjs中表单验证的方式有哪些”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联网站建设公司行业资讯频道！

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

当前题目：Angualrjs中表单验证的方式有哪些-创新互联
URL网址：https://www.cdcxhl.com/article4/ddddoe.html

成都网站建设公司_创新互联，为您提供品牌网站建设、品牌网站制作、企业建站、小程序开发、定制开发、网站导航

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联