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 相关文章推荐
如何用js控制css中的float的代码
Aug 16 Javascript
js活用事件触发对象动作
Aug 10 Javascript
javascript 弹出层组件(升级版)
May 12 Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
Oct 22 Javascript
javascript在子页面中函数无法调试问题解决方法
Jan 17 Javascript
js动态添加onclick事件可传参数与不传参数
Jul 29 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
Aug 10 Javascript
微信小程序实现打开内置地图功能【附源码下载】
Dec 07 Javascript
Node.js的进程管理的深入理解
Jan 09 Javascript
微信小程序实现页面浮动导航
Jan 28 Javascript
详解小程序如何避免多次点击,重复触发事件
Apr 08 Javascript
vue npm install 安装某个指定的版本操作
Aug 11 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
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
239军机修复记
2021/03/02 无线电
怎么使 Mysql 数据同步
2006/10/09 PHP
强烈推荐:php.ini中文版(2)
2006/10/09 PHP
用cookies来跟踪识别用户
2006/10/09 PHP
php微信开发自定义菜单
2016/08/27 PHP
PHP日志LOG类定义与用法示例
2018/09/06 PHP
javascript cookie解码函数(兼容ff)
2008/03/17 Javascript
javascript基础知识大集锦(一) 推荐收藏
2011/01/13 Javascript
精通Javascript系列之Javascript基础篇
2011/06/07 Javascript
jquery 提示信息显示后自动消失的具体实现
2013/12/18 Javascript
IE下双击checkbox反应延迟问题的解决方法
2014/03/27 Javascript
调试JavaScript中正则表达式中遇到的问题
2015/01/27 Javascript
jquery插件validation实现验证身份证号等
2015/06/04 Javascript
基于jquery实现智能提示控件intellSeach.js
2016/03/17 Javascript
JavaScript仿微博输入框效果(案例分析)
2016/12/06 Javascript
JS实现JSON.stringify的实例代码讲解
2017/02/07 Javascript
js图片放大镜效果实现方法详解
2020/10/28 Javascript
利用three.js画一个3D立体的正方体示例代码
2017/11/19 Javascript
JavaScript程序设计高级算法之动态规划实例分析
2017/11/24 Javascript
对类Vue的MVVM前端库的实现代码
2018/09/07 Javascript
如何高效使用Python字典的方法详解
2017/08/31 Python
Python3利用SMTP协议发送E-mail电子邮件的方法
2017/09/30 Python
在Python中增加和插入元素的示例
2018/11/01 Python
Django中的静态文件管理过程解析
2019/08/01 Python
pytorch方法测试——激活函数(ReLU)详解
2020/01/15 Python
检测tensorflow是否使用gpu进行计算的方式
2020/02/03 Python
Python实现自动签到脚本功能
2020/08/20 Python
HTML5在IE10、火狐下中文乱码问题的解决方法
2013/11/18 HTML / CSS
配置H5的滚动条样式的示例代码
2018/03/09 HTML / CSS
缓解脚、腿和背部疼痛:Z-CoiL鞋
2019/03/12 全球购物
销售人员职业生涯规划范文
2014/03/01 职场文书
食品安全工作实施方案
2014/03/26 职场文书
离婚答辩状怎么写
2015/05/22 职场文书
党风廉政承诺书2016
2016/03/25 职场文书
MySQL 表空间碎片的概念及相关问题解决
2021/05/07 MySQL
vue+spring boot实现校验码功能
2021/05/27 Vue.js