首页
所有分类
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 URL参数读取改进版
Jan 16 Javascript
Jquery实现页面加载时弹出对话框代码
Apr 19 Javascript
JavaScript比较两个对象是否相等的方法
Feb 06 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
Aug 25 Javascript
JS+CSS实现仿msn风格选项卡效果代码
Oct 22 Javascript
输入框点击时边框变色效果的实现方法
Dec 26 Javascript
ES6数组的扩展详解
Apr 25 Javascript
JS常用的几种数组遍历方式以及性能分析对比实例详解
Apr 11 Javascript
利用JS如何获取form表单数据
Dec 19 Javascript
vue实现瀑布流组件滑动加载更多
Mar 10 Javascript
ant design vue datepicker日期选择器中文化操作
Oct 28 Javascript
微信小程序自定义底部弹出框动画
Nov 18 Javascript
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
德生(17) YB400(2) TECSUN(1) YB235(1) YB217(1) 再生机(1) PL-365(1) 1 Tube Radio(1) 东方红(1) 直流胆(1)
You might like
农民和部队如何穿矿
2020/03/04 星际争霸
PHP的栏目导航程序
2006/10/09 PHP
一个简单实现多条件查询的例子
2006/10/09 PHP
PHP面向对象学习笔记之一 基础概念
2012/10/06 PHP
PHP程序中的文件锁、互斥锁、读写锁使用技巧解析
2016/03/21 PHP
BOOM vs RR BO3 第一场2.13
2021/03/10 DOTA
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
2011/06/20 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
2015/02/26 Javascript
bootstrap中使用google prettify让代码高亮的方法
2016/10/21 Javascript
js实现彩色条纹滚动条效果
2017/03/15 Javascript
Angular2使用Angular-CLI快速搭建工程（二）
2017/05/21 Javascript
详解vue 配合vue-resource调用接口获取数据
2017/06/22 Javascript
AjaxUpLoad.js实现文件上传
2018/03/05 Javascript
vue + vuex todolist的实现示例代码
2018/03/09 Javascript
在Vuex使用dispatch和commit来调用mutations的区别详解
2018/09/18 Javascript
webpack@v4升级踩坑(小结)
2018/10/08 Javascript
微信小程序scroll-view点击项自动居中效果的实现
2020/03/25 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
2020/04/20 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
2020/06/15 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
2020/11/11 Javascript
详解vue3中组件的非兼容变更
2021/03/03 Vue.js
[59:32]Liquid vs Fnatic 2019国际邀请赛淘汰赛败者组BO1 8.20.mp4
2020/07/19 DOTA
Python facenet进行人脸识别测试过程解析
2019/08/16 Python
wxPython窗体拆分布局基础组件
2019/11/19 Python
Python timeit模块的使用实践
2020/01/13 Python
代码总结Python2 和 Python3 字符串的区别
2020/01/28 Python
Python绘图之柱形图绘制详解
2020/07/28 Python
详解Python 中的容器 collections
2020/08/17 Python
文体活动实施方案
2014/03/27 职场文书
学校食品安全实施方案
2014/06/14 职场文书
ktv周年庆活动方案
2014/08/18 职场文书
创先争优活动党员公开承诺书
2014/08/29 职场文书
2015大学党建带团建工作总结
2015/07/23 职场文书
初中毕业生感言
2015/07/31 职场文书
升职自荐书
2019/05/09 职场文书
使用pandas生成/读取csv文件的方法实例
2021/07/09 Python