首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

AngularJS学习笔记之表单验证功能实例详解

Posted in Javascript onJuly 06, 2017

本文实例讲述了AngularJS学习笔记之表单验证功能。分享给大家供大家参考，具体如下：

一、执行基本的表单验证

<!DOCTYPE html>
<html ng-app='exampleApp'>
  <head>
    <meta charset="UTF-8">
    <title>表单</title>
    <script src="../../js/angular.min.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="../../css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
    <link rel="stylesheet" type="text/css" href="../../css/bootstrap-theme.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
    <script type="text/javascript">
      angular.module('exampleApp',[])
      .controller('defaultCtrl',function($scope){
        $scope.addUser=function(userDetails){
          $scope.message=userDetails.name+"("+userDetails.email+")("+userDetails.agreed+")"
        }
        $scope.message='Ready';
      });
    </script>
  </head>
  <body>
    <div id="todoPanel" class="panel" ng-controller='defaultCtrl'>
      <form name='myForm' novalidate ng-submit='addUser(newUser)'>
        <div class="well">
          <div class="form-group">
            <label for="">Name:</label>
            <input type="text" name='userName' class="form-control" required ng-model='newUser.name'/>
          </div>
          <div class="form-group">
            <label for="">Email:</label>
            <input type="email" name='userEmail' class="form-control" required ng-model='newUser.email'/>
          </div>
          <div class="checkbox">
            <label for="">
              <input type="checkbox" ng-model='newUser.agreed' required />
              I agree to the terms and conditions
            </label>
          </div>
          <button type="submit" class="btn btn-primary btn-block" ng-disabled='myForm.$invalid'>OK</button>
        </div>
        <div class="well">
          message:{{message}}
          <div>
            valid:{{myForm.$valid}}
          </div>
        </div>
      </form>
    </div>
  </body>
</html>

在上述例子中，该HTML文档被浏览器加载时的初始状态是：有三个input元素以及一个被禁用且无法单击的ok按钮，当在文本框中输入值并且勾选了复选框之后，按钮将变为可用，从而允许用户提交表单。

1、增加表单元素

（1）首先需要在form上设置一个name属性
（2）需要给表单增添novalidate属性，该属性用于告诉浏览器不要自己校验表单，从而允许AngularJS不受干扰的工作
（3）ng-submit指令为表单提交事件指定一个自定义的响应行为，将在用户提交表单时触发

2、使用校验属性

（1）为各个想要验证的元素添加name属性，这样可以访问到Angularjs所提供的各种特殊的变量
（2）设置type属性，这个属性指定了input元素将要接收的数据类型，这些类型告诉angularjs需要什么样的校验
（3）指定required属性，这个属性指定用户必须为待校验的表单提供一个输入值
（4）在本例中input元素都使用ng-model指令来设置隐式定义的newUser对象的一个属性

3、监控表单的有效性

AngularJS中用来替换标准表单元素的指令定义了一些特殊的变量，可以用来检查表单中各个元素或整个表单的有效性状态。

$pristine：如果用户没有与元素/表单产生交互，则返回true
$dirty：如果用户与元素/表单产生过交互，则返回true
$valid：当元素/表单内容的校验结果为有效时则返回true
$invalid：当元素/表单内容的校验结果为无效时则返回true
$error：提供校验错误的详情信息

二、提供表单校验反馈信息

在上面的例子中展示的效果是比较简单的，ok按钮将一直被禁用，直到所有的input元素可用，以阻止用户输入错误格式的或未填完的数据。在接下来我们将演示AngularJS为报告实时的校验信息

1、使用css提供校验反馈信息

ng-pristine：用户未曾交互过的元素被添加到这个类
ng-dirty：用户曾经交互过的元素被添加到这个类
ng-valid：校验结果为有效的元素在这个类中
ng-invalid：校验结果为无效的元素在这个类中

下面我们来看具体用法：

<!DOCTYPE html>
<html ng-app='exampleApp'>
  <head>
    <meta charset="UTF-8">
    <title>表单</title>
    <script src="../../js/angular.min.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="../../css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
    <link rel="stylesheet" type="text/css" href="../../css/bootstrap-theme.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
    <script type="text/javascript">
      angular.module('exampleApp',[])
      .controller('defaultCtrl',function($scope){
        $scope.addUser=function(userDetails){
          $scope.message=userDetails.name+"("+userDetails.email+")("+userDetails.agreed+")"
        }
        $scope.message='Ready';
      });
    </script>
    <style type="text/css">
      form .ng-invalid.ng-dirty{background-color: lightpink;}
      form .ng-valid.ng-dirty{background-color: lightgreen;}
      span.summary.ng-invalid{color: red;font-weight: bold;}
      span.summary.ng-valid{color: green;}
    </style>
  </head>
  <body>
    <div id="todoPanel" class="panel" ng-controller='defaultCtrl'>
      <form name='myForm' novalidate ng-submit='addUser(newUser)'>
        <div class="well">
          <div class="form-group">
            <label for="">Name:</label>
            <input type="text" name='userName' class="form-control" required ng-model='newUser.name'/>
          </div>
          <div class="form-group">
            <label for="">Email:</label>
            <input type="email" name='userEmail' class="form-control" required ng-model='newUser.email'/>
          </div>
          <div class="checkbox">
            <label for="">
              <input type="checkbox" ng-model='newUser.agreed' required />
              I agree to the terms and conditions
            </label>
          </div>
          <button type="submit" class="btn btn-primary btn-block" ng-disabled='myForm.$invalid'>OK</button>
        </div>
        <div class="well">
          message:{{message}}
          <div>
            valid:
            <span class="summary" ng-class="myForm.$valid?'ng-valid':'ng-invalid'">
              {{myForm.$valid}}
            </span>
          </div>
        </div>
      </form>
    </div>
  </body>
</html>

在上述例子中，我们定义了四个样式，头两个样式用于选择属于ng-dirty类成员的元素，仅在用户与之交互后应用到相应元素上。内容有效的元素是ng-valid类的成员，会被渲染为淡绿色背景，内容无效的元素是ng-invalid类的成员，会被渲染为淡粉色背景

2、使用特殊变量来提供反馈信息

<!DOCTYPE html>
<html ng-app='exampleApp'>
  <head>
    <meta charset="UTF-8">
    <title>表单</title>
    <script src="../../js/angular.min.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="../../css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
    <link rel="stylesheet" type="text/css" href="../../css/bootstrap-theme.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
    <script type="text/javascript">
      angular.module('exampleApp',[])
      .controller('defaultCtrl',function($scope){
        $scope.addUser=function(userDetails){
          $scope.message=userDetails.name+"("+userDetails.email+")("+userDetails.agreed+")"
        }
        $scope.message='Ready';
      });
    </script>
    <style type="text/css">
      form .ng-invalid-required.ng-dirty{background-color: lightpink;}
      form .ng-invalid-email.ng-dirty{background-color: lightgoldenrodyellow;}
      form .ng-valid.ng-dirty{background-color: lightgreen;}
      span.summary.ng-invalid{color: red;font-weight: bold;}
      span.summary.ng-valid{color: green;}
      div.error{color:red;font-weight: bold;}
    </style>
  </head>
  <body>
    <div id="todoPanel" class="panel" ng-controller='defaultCtrl'>
      <form name='myForm' novalidate ng-submit='addUser(newUser)'>
        <div class="well">
          <div class="form-group">
            <label for="">Email:</label>
            <input type="email" name='userEmail' class="form-control" required ng-model='newUser.email'/>
            <div class="error" ng-show="myForm.userEmail.$invalid&&myForm.userEmail.$dirty">
              <span ng-show="myForm.userEmail.$error.email">
                please enter a valid email address
              </span>
              <span ng-show="myForm.userEmail.$error.required">
                please enter a value
              </span>
            </div>
          </div>
          <button type="submit" class="btn btn-primary btn-block" ng-disabled='myForm.$invalid'>OK</button>
        </div>
      </form>
    </div>
  </body>
</html>

在本例中新增了一个新的div元素用于给用户显示校验提示信息，新的div元素的可见性是受ng-show指令控制的，将会在input元素被输入值，且输入值未通过校验时显示该元素。这里是联合使用form元素的name值和input的name值来访问input元素的。在这个例子中，我们使用特殊校验变量和其他指令联合使用以增强用户体验。但是这样可能会使页面增加大量的相同冗余信息的元素，接下来我们做简化

<!DOCTYPE html>
<html ng-app='exampleApp'>
  <head>
    <meta charset="UTF-8">
    <title>表单</title>
    <script src="../../js/angular.min.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="../../css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
    <link rel="stylesheet" type="text/css" href="../../css/bootstrap-theme.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
    <script type="text/javascript">
      angular.module('exampleApp',[])
      .controller('defaultCtrl',function($scope){
        $scope.addUser=function(userDetails){
          $scope.message=userDetails.name+"("+userDetails.email+")("+userDetails.agreed+")"
        }
        $scope.message='Ready';
        $scope.getError=function(error){
          if(angular.isDefined(error)){
            if(error.required){
              return 'please enter a value';
            }else if(error.email){
              return 'please enter a valid email address';
            }
          }
        }
      });
    </script>
    <style type="text/css">
      form .ng-invalid-required.ng-dirty{background-color: lightpink;}
      form .ng-invalid-email.ng-dirty{background-color: lightgoldenrodyellow;}
      form .ng-valid.ng-dirty{background-color: lightgreen;}
      span.summary.ng-invalid{color: red;font-weight: bold;}
      span.summary.ng-valid{color: green;}
      div.error{color:red;font-weight: bold;}
    </style>
  </head>
  <body>
    <div id="todoPanel" class="panel" ng-controller='defaultCtrl'>
      <form name='myForm' novalidate ng-submit='addUser(newUser)'>
        <div class="well">
          <div class="form-group">
            <label for="">Email:</label>
            <input type="email" name='userEmail' class="form-control" required ng-model='newUser.email'/>
            <div class="error" ng-show="myForm.userEmail.$invalid&&myForm.userEmail.$dirty">
              {{getError(myForm.userEmail.$error)}}
            </div>
          </div>
          <button type="submit" class="btn btn-primary btn-block" ng-disabled='myForm.$invalid'>OK</button>
        </div>
      </form>
    </div>
  </body>
</html>

希望本文所述对大家AngularJS程序设计有所帮助。

AngularJS学习笔记之表单验证功能实例详解

- Author -

Annexu1991

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript 继承的实现
Jul 09 Javascript
javascript与CSS复习(二)
Jun 29 Javascript
JQuery对id中含有特殊字符的转义处理示例
Sep 06 Javascript
JQuery教学之性能优化
May 14 Javascript
Bootstrap每天必学之折叠
Apr 12 Javascript
详解JavaScript中的自定义事件编写
May 10 Javascript
JS简单实现表格排序功能示例
Dec 20 Javascript
详解Vue学习笔记入门篇之组件的内容分发(slot)
Jul 17 Javascript
React学习之事件绑定的几种方法对比
Sep 24 Javascript
ES6中Class类的静态方法实例小结
Oct 28 Javascript
详解Vue如何支持JSX语法
Nov 10 Javascript
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
AngularJS ng-repeat指令及Ajax的应用实例分析
Jul 06 #Javascript
AngularJS常见过滤器用法实例总结
Jul 06 #Javascript
Vue学习之路之登录注册实例代码
Jul 06 #Javascript
AngularJS中ng-class用法实例分析
Jul 06 #Javascript
jQuery 实现图片的依次加载图片功能
Jul 06 #jQuery
JS图片轮播与索引变色功能实例详解
Jul 06 #Javascript
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 #jQuery
ESXI(1) Master(1) Slave(1) NginxConfig(1) 表约束(2) SVN(1) 主从复制(1) caddy(1) transaction(1) 共享文件夹(1)
You might like
PHP反转字符串函数strrev()函数的用法
2012/02/04 PHP
PHP 读取Postgresql中的数组
2013/04/14 PHP
Laravel5.5 实现后台管理登录的方法(自定义用户表登录)
2019/09/30 PHP
phpStorm2020 注册码
2020/09/17 PHP
详解new function(){}和function(){}() 区别分析
2008/03/22 Javascript
js中将具有数字属性名的对象转换为数组
2011/03/06 Javascript
javascript数组去重3种方法的性能测试与比较
2013/03/26 Javascript
jQuery实现跨域iframe接口方法调用
2015/03/14 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
深入理解jquery中的事件与动画
2016/05/24 Javascript
Bootstrap基本样式学习笔记之图片(6)
2016/12/07 Javascript
angular中实现控制器之间传递参数的方式
2017/04/24 Javascript
基于vue.js的分页插件详解
2017/11/27 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
2018/03/01 Javascript
JS中利用FileReader实现上传图片前本地预览功能
2018/03/02 Javascript
Vue实现表格批量审核功能实例代码
2019/05/28 Javascript
javascript中闭包closure的深入讲解
2021/03/03 Javascript
[59:00]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第一场 3月7日
2021/03/11 DOTA
Python时区设置方法与pytz查询时区教程
2013/11/27 Python
Python的Flask框架中@app.route的用法教程
2015/03/31 Python
Python3实现Web网页图片下载
2016/01/28 Python
Go语言基于Socket编写服务器端与客户端通信的实例
2016/02/19 Python
好用的Python编辑器WingIDE的使用经验总结
2016/08/31 Python
python 将字符串转换成字典dict的各种方式总结
2018/03/23 Python
Python实现正弦信号的时域波形和频谱图示例【基于matplotlib】
2018/05/04 Python
详解【python】str与json类型转换
2019/04/29 Python
Python 复平面绘图实例
2019/11/21 Python
python队列原理及实现方法示例
2019/11/27 Python
Python3合并两个有序数组代码实例
2020/08/11 Python
Python通过递归函数输出嵌套列表元素
2020/10/15 Python
迪卡侬英国官网：Decathlon英国
2017/04/08 全球购物
英国的潮牌鞋履服饰商店：size?
2019/03/26 全球购物
纪律委员竞选稿
2015/11/19 职场文书
2016社区平安家庭事迹材料
2016/02/26 职场文书
幽默口才训练经典句子（48句）
2019/08/19 职场文书
python使用pygame创建精灵Sprite
2021/04/06 Python