DDR爱好者之家

Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
站长资源 2024/11/27 佚名
62 1538
DDR爱好者之家 Design By 杰米

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 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 表单验证的两种方式(失去焦点验证和点击提交验证)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米