Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)

 更新时间:2017年05月09日 11:30:17   作者:Manson_zh  
AngularJS提供了表单验证,但是验证的过程交互体验很不好,比如重设密码,重复密码的时候一键入就会提示密码不正确。现在小编给大家整理了两种方法,需要的的朋友参考下吧

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

相关文章

  • Angularjs中$http以post请求通过消息体传递参数的实现方法

    Angularjs中$http以post请求通过消息体传递参数的实现方法

    这篇文章主要介绍了Angularjs中$http以post请求通过消息体传递参数的方法,结合实例形式分析了$http使用post请求传递参数的相关设置与使用技巧,需要的朋友可以参考下
    2016-08-08
  • AngularJS实现使用路由切换视图的方法

    AngularJS实现使用路由切换视图的方法

    这篇文章主要介绍了AngularJS实现使用路由切换视图的方法,结合学生信息管理系统为例分析了使用controllers.js控制器来切换视图的具体步骤与相关操作技巧,需要的朋友可以参考下
    2017-01-01
  • AngularJS HTML编译器介绍

    AngularJS HTML编译器介绍

    这篇文章主要介绍了AngularJS HTML编译器介绍,AngularJS的HTML编译器能让浏览器识别新的HTML语法。它能让你将行为关联到HTML元素或者属性上,甚至能让你创造具有自定义行为的新元素,需要的朋友可以参考下
    2014-12-12
  • Angular事件之不同组件间传递数据的方法

    Angular事件之不同组件间传递数据的方法

    这篇文章主要介绍了Angular事件之不同组件间传递数据的方法,利用Angular Event在不同组件之间传递数据,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • AngularJS快速入门

    AngularJS快速入门

    本文通过几个循序渐进的例子,给大家详细讲解了如何快速入门AngularJS,十分的实用,这里推荐给大家,有需要的小伙伴可以参考下。
    2015-04-04
  • Angular跨字段验证器中如何直接调用其它独立的验证器

    Angular跨字段验证器中如何直接调用其它独立的验证器

    我们在开发的时候都会用到表单,那么验证器就是必不可少的东西,这篇文章主要给大家介绍了关于在Angular跨字段验证器中如何直接调用其它独立的验证器的相关资料,需要的朋友可以参考下
    2022-03-03
  • AngularJs Dependency Injection(DI,依赖注入)

    AngularJs Dependency Injection(DI,依赖注入)

    本文主要介绍AngularJs Dependency Injection,这里整理了详细资料及示例代码有兴趣的小伙伴可以参考下
    2016-09-09
  • angular中如何绑定iframe中src的方法

    angular中如何绑定iframe中src的方法

    这篇文章主要介绍了angular中如何绑定iframe中src的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • Angularjs验证用户输入的字符串是否为日期时间

    Angularjs验证用户输入的字符串是否为日期时间

    这篇文章主要介绍了Angularjs验证用户输入的字符串是否为日期时间,需要的朋友可以参考下
    2017-06-06
  • angular2 ng2-file-upload上传示例代码

    angular2 ng2-file-upload上传示例代码

    这篇文章主要介绍了angular2 ng2-file-upload上传示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08

最新评论