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 相关文章推荐
Iframe 自适应高度并实时监控高度变化的js代码
Oct 30 Javascript
window.location.href中url中数据量太大时的解决方法
Dec 23 Javascript
使用node.js 制作网站前台后台
Nov 13 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
Sep 10 Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 Javascript
详解Vue2中组件间通信的解决全方案
Jul 28 Javascript
基于JavaScript实现表格滚动分页
Nov 22 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
Oct 02 Javascript
React如何解决fetch跨域请求时session失效问题
Nov 02 Javascript
详解Angular模板引用变量及其作用域
Nov 23 Javascript
vue中使用[provide/inject]实现页面reload的方法
Sep 30 Javascript
Vue3.0 手写放大镜效果
Jul 25 Vue.js
微信小程序之获取当前位置经纬度以及地图显示详解
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
虫族 Zerg 历史背景
2020/03/14 星际争霸
5.PHP的其他功能
2006/10/09 PHP
php中的字符编码转换函数用法示例
2014/10/20 PHP
PHP实现的简单排列组合算法应用示例
2017/06/20 PHP
laravel5.1框架基础之Blade模板继承简单使用方法分析
2019/09/05 PHP
利用javascript实现一些常用软件的下载导航
2009/08/03 Javascript
一些javascript一些题目的解析
2010/12/25 Javascript
javascript 延迟加载技术(lazyload)简单实现
2011/01/17 Javascript
JS操作CSS随机改变网页背景实现思路
2014/03/10 Javascript
简单易用的倒计时js代码
2014/08/04 Javascript
在JavaScript中处理时间之getHours()方法的使用
2015/06/10 Javascript
jquery删除table当前行的实例代码
2016/10/07 Javascript
详解Weex基于Vue2.0开发模板搭建
2017/03/20 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
2017/08/14 Javascript
angular4 共享服务在多个组件中数据通信的示例
2018/03/30 Javascript
Vue中 key keep-alive的实现原理
2018/09/18 Javascript
angularJs在多个控制器中共享服务数据的方法
2018/09/30 Javascript
Vue实现table上下移动功能示例
2019/02/21 Javascript
vue项目中定义全局变量、函数的几种方法
2019/11/08 Javascript
微信小程序实现图片压缩
2019/12/03 Javascript
vue学习之Vue-Router用法实例分析
2020/01/06 Javascript
python获取android设备的GPS信息脚本分享
2015/03/06 Python
Python中处理字符串的相关的len()方法的使用简介
2015/05/19 Python
Python的Flask框架中配置多个子域名的方法讲解
2016/06/07 Python
这可能是最好玩的python GUI入门实例(推荐)
2019/07/19 Python
基于python实现可视化生成二维码工具
2020/07/08 Python
3种方式实现瀑布流布局小结
2019/09/05 HTML / CSS
Godiva巧克力英国官网:比利时歌帝梵巧克力
2018/08/28 全球购物
高职教师岗位职责
2013/12/24 职场文书
学校出纳员岗位职责
2014/03/18 职场文书
教师工作总结范文2014
2014/11/10 职场文书
2014年团支部年度工作总结
2014/12/24 职场文书
纪检监察立案决定书
2015/06/24 职场文书
教师师德承诺书2016
2016/03/25 职场文书
2016年小学“我们的节日·中秋节”活动总结
2016/04/05 职场文书
使用redis实现延迟通知功能(Redis过期键通知)
2021/09/04 Redis