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 相关文章推荐
JQuery读取XML文件数据并显示的实现代码
Dec 16 Javascript
javascript:history.go()和History.back()的区别及应用
Nov 25 Javascript
ajax接收后台数据在html页面显示
Feb 19 Javascript
如何使用Bootstrap创建表单
Mar 29 Javascript
Vue.js实战之利用vue-router实现跳转页面
Apr 01 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
前端开发不得不知的10个最佳ES6特性
Aug 30 Javascript
微信小程序实现简单input正则表达式验证功能示例
Nov 30 Javascript
mpvue构建小程序的方法(步骤+地址)
May 22 Javascript
原来JS还可以这样拆箱转换详解
Feb 01 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
Apr 19 Javascript
jquery更改元素属性attr()方法操作示例
May 22 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 数组基础知识小结
2010/08/20 PHP
PHP实现格式化文件数据大小显示的方法
2015/01/03 PHP
php bootstrap实现简单登录
2016/03/08 PHP
JavaScript 密码强度判断代码
2009/09/05 Javascript
JavaScript 学习笔记(十二) dom
2010/01/21 Javascript
javascript 内存回收机制理解
2011/01/17 Javascript
判断用户的在线状态 onbeforeunload事件
2011/03/05 Javascript
jQuery函数的等价原生函数代码示例
2013/05/27 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
2015/03/02 Javascript
js Canvas实现的日历时钟案例分享
2016/12/25 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
2017/01/06 Javascript
微信小程序模板之分页滑动栏
2017/02/10 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
2017/05/13 jQuery
NodeJS链接MySql数据库的操作方法
2017/06/27 NodeJs
Next.js项目实战踩坑指南(笔记)
2018/11/29 Javascript
webpack-url-loader 解决项目中图片打包路径问题
2019/02/15 Javascript
[02:56]DOTA2矮人直升机 英雄基础教程
2013/11/26 DOTA
Python实现的基于优先等级分配糖果问题算法示例
2018/04/25 Python
Python读取系统文件夹内所有文件并统计数量的方法
2018/10/23 Python
对python内置map和six.moves.map的区别详解
2018/12/19 Python
详解Python3中的 input() 函数
2020/03/18 Python
Python如何把十进制数转换成ip地址
2020/05/25 Python
python使用多线程查询数据库的实现示例
2020/08/17 Python
python打包生成so文件的实现
2020/10/30 Python
科茨沃尔德家居商店:Scotts of Stow
2018/06/29 全球购物
Ruby如何创建一个线程
2013/03/10 面试题
求职简历自荐信范文
2013/10/21 职场文书
自我鉴定标准格式
2014/03/19 职场文书
初中英语演讲稿
2014/04/29 职场文书
教师工作自我鉴定范文
2014/09/14 职场文书
领导干部四风问题自我剖析材料
2014/09/25 职场文书
2014年信访维稳工作总结
2014/12/08 职场文书
行政主管岗位职责
2015/02/03 职场文书
2016年6.5世界环境日宣传活动总结
2016/04/01 职场文书
Python实现机器学习算法的分类
2021/06/03 Python
golang操作redis的客户端包有多个比如redigo、go-redis
2022/04/14 Golang