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


Posted in Javascript onMay 09, 2017

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

Javascript 相关文章推荐
javascript demo 基本技巧
Dec 18 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
Jun 02 Javascript
javascript中this的四种用法
May 11 Javascript
javascript显示倒计时控制按钮的简单实现
Jun 07 Javascript
js 上传文件预览的简单实例
Aug 16 Javascript
用file标签实现多图文件上传预览
Feb 14 Javascript
轻松学习Javascript闭包
Mar 01 Javascript
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
mui上拉加载更多下拉刷新数据的封装过程
Nov 03 Javascript
微信小程序自定义弹窗wcPop插件
Nov 19 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
微信小程序之获取当前位置经纬度以及地图显示详解
May 09 #Javascript
JS中的数组转变成JSON格式字符串的方法
May 09 #Javascript
jQuery插件开发发送短信倒计时功能代码
May 09 #jQuery
JavaScrpt的面向对象全面解析
May 09 #Javascript
ES6正则表达式的一些新功能总结
May 09 #Javascript
Vuex和前端缓存的整合策略详解
May 09 #Javascript
基于JS实现限时抢购倒计时间表代码
May 09 #Javascript
You might like
使用字符串函数输出整数化的PHP版本号
2006/10/09 PHP
php实现分页显示
2015/11/03 PHP
实例讲解PHP设计模式编程中的简单工厂模式
2016/02/29 PHP
轻松实现php文件上传功能
2017/02/17 PHP
php实现的三个常用加密解密功能函数示例
2017/11/06 PHP
浅谈PHP实现大流量下抢购方案
2017/12/15 PHP
javascript开发技术大全 第4章 直接量与字符集
2011/07/03 Javascript
web开发人员学习jQuery的6大理由及jQuery的优势介绍
2013/01/03 Javascript
jQuery动画效果相关方法实例分析
2015/12/31 Javascript
JS模拟简易滚动条效果代码(附demo源码)
2016/04/05 Javascript
IE下JS保存图片的简单实例
2016/07/15 Javascript
jquery 动态合并单元格的实现方法
2016/08/26 Javascript
Javascript实现汉字和拼音互转的终极方案
2016/10/19 Javascript
angular实现表单验证及提交功能
2017/02/01 Javascript
vue数据双向绑定原理解析(get &amp; set)
2017/03/08 Javascript
jQuery中内容过滤器简单用法示例
2018/03/31 jQuery
Angular6 写一个简单的Select组件示例
2018/08/20 Javascript
vue单页缓存方案分析及实现
2018/09/25 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
2018/11/23 Javascript
vue-cli 为项目设置别名的方法
2019/10/15 Javascript
JavaScript中使用Spread运算符的八种方法总结
2020/06/18 Javascript
返回上一个url并刷新界面的js代码
2020/09/12 Javascript
Python常用的爬虫技巧总结
2016/03/28 Python
python实现字典(dict)和字符串(string)的相互转换方法
2017/03/01 Python
python中requests库session对象的妙用详解
2017/10/30 Python
Python通过属性手段实现只允许调用一次的示例讲解
2018/04/21 Python
Pytorch evaluation每次运行结果不同的解决
2020/01/02 Python
mac安装python3后使用pip和pip3的区别说明
2020/09/01 Python
详解CSS3 Media Queries中媒体属性的使用
2016/02/29 HTML / CSS
Tarte Cosmetics官网:美国最受欢迎的化妆品公司之一
2017/08/24 全球购物
加拿大的标志性百货公司:Hudson’s Bay(哈得逊湾)
2019/09/03 全球购物
以太网Ethernet IEEE802.3
2013/08/05 面试题
考博专家推荐信模板
2013/12/02 职场文书
实验心得体会
2014/09/05 职场文书
同学会感言
2015/07/30 职场文书
Win10服务全部禁用了怎么启动?Win10服务全部禁用解决方法
2022/09/23 数码科技