Angular简单验证功能示例

 更新时间:2017年12月22日 11:24:54   作者:qq_41073714  
这篇文章主要介绍了Angular简单验证功能,涉及AngularJS事件响应、正则判定、页面元素属性动态修改等相关操作技巧,需要的朋友可以参考下

本文实例讲述了Angular简单验证功能。分享给大家供大家参考,具体如下:

先来看看运行效果:

完整实例代码如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>www.jb51.net angular验证功能</title>
    <script src="angular.min.js"></script>
    <style>
      input{
        display: block;
      }
      ul li{
        color: red;
      }
    </style>
    <script>
      angular.module("myapp",[])
      .controller("demoC",function($scope){
        $scope.datas = [{
            id: 10011120,
            name: "iphoneX",
            num: 99
          },
          {
            id: 10011121,
            name: "华为mate10",
            num: 20
          },
          {
            id: 10011122,
            name: "vivoR12",
            num: 55
          }
        ]; //定义一个数组
        $scope.save=function(){
          //创建一个存放错误信息数组
          $scope.error_val=[];
          var reg_id=/^\d{8,8}$/; //只能8位数字
          if(!reg_id.test($scope.id)){
            $scope.error_val.push("资产编号格式,必须为数字,且长度为8位");
          }
          //资产名称
          if($scope.name==undefined||$scope.name==""){
            $scope.error_val.push("资产名称不能为空!");
          }else{
            for(var i in $scope.datas){
              if($scope.name==$scope.datas[i].name){
                $scope.error_val.push("资产名称已经存在");
                break; //结束循环,已经查找到资产名称不合法
              }
            }
          }
          //资产数量
          var reg_num=/^\d{1,}$/; //只能8位数字
          if(!reg_num.test($scope.num)){
            $scope.error_val.push("资产编号数量,必须为数字");
          }else{
            if($scope.num<=0){
              $scope.error_val.push("资产编号数量必须大于0");
            }
          }
          //何时添加进行,何时不添加
          if($scope.error_val.length==0){
            $scope.datas.push({
              id:$scope.id,
              name:$scope.name,
              num:$scope.num
            });
          }
        }
      })
    </script>
  </head>
  <body ng-app="myapp" ng-controller="demoC">
    <table border="1px solid">
      <tr>
        <td>资产编号</td>
        <td>资产名称</td>
        <td>资产数量</td>
      </tr>
      <tr ng-repeat="d in datas">
        <td>{{d.id}}</td>
        <td>{{d.name}}</td>
        <td>{{d.num}}</td>
      </tr>
    </table>
    <div>
      <form>
        资产编号<input ng-model="id" />
        资产名称<input ng-model="name" />
        资产数量<input ng-model="num" />
        <div>
          <ul>
            <li ng-repeat="e in error_val">
              {{e}}
            </li>
          </ul>
        </div>
        <button ng-click="save()">
        资产录入  
        </button>
      </form>
    </div>
  </body>
</html>

PS:这里再为大家提供2款非常方便的正则表达式工具供大家参考使用:

JavaScript正则表达式在线测试工具:
http://tools.jb51.net/regex/javascript

正则表达式在线生成工具:
http://tools.jb51.net/regex/create_reg

更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结

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

相关文章

  • AngularJS基础 ng-class-odd 指令示例

    AngularJS基础 ng-class-odd 指令示例

    本文主要介绍AngularJS ng-class-odd 指令,这里对ng-class-odd基础知识做了详细整理,并有示例代码和效果图,学习AngularJS的同学可以参考下
    2016-08-08
  • Angular实现的自定义模糊查询、排序及三角箭头标注功能示例

    Angular实现的自定义模糊查询、排序及三角箭头标注功能示例

    这篇文章主要介绍了Angular实现的自定义模糊查询、排序及三角箭头标注功能,涉及AngularJS针对页面table元素的遍历、查询、判断、排序等相关操作技巧,需要的朋友可以参考下
    2017-12-12
  • Angular Material Icon使用详解

    Angular Material Icon使用详解

    这篇文章主要介绍了Angular Material Icon使用详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • Angular中使用MathJax遇到的一些问题

    Angular中使用MathJax遇到的一些问题

    这篇文章主要给大家介绍了关于Angular中使用MathJax遇到的一些问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友下面来一起学习学习吧。
    2017-12-12
  • Angular中使用响应式表单的详细步骤

    Angular中使用响应式表单的详细步骤

    Angular提供了两种处理表单的方式模板驱动表单和响应式表单(也称为模型驱动表单),使用模板驱动表单时,模板指令被用来构建表单的内部表示,在本文中,您探讨了如何将响应式表单应用于一个示例 Angular 应用程序
    2024-02-02
  • AngularJS入门教程之 XMLHttpRequest实例讲解

    AngularJS入门教程之 XMLHttpRequest实例讲解

    本文主要讲解 AngularJS XMLHttpRequest,这里给大家整理相关资料并提供实例代码,有需要的小伙伴参考下
    2016-07-07
  • AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法

    AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法

    这篇文章主要介绍了AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法,结合实例形式分析AngularJS下拉滚动插件ngInfiniteScroll的下载、功能、属性及相关使用方法,需要的朋友可以参考下
    2016-12-12
  • AngularJS开发教程之控制器之间的通信方法分析

    AngularJS开发教程之控制器之间的通信方法分析

    这篇文章主要介绍了AngularJS开发教程之控制器之间的通信方法,结合实例形式较为详细的分析了AngularJS控制器之间通信的三种常用方式及相关使用技巧,需要的朋友可以参考下
    2016-12-12
  • AngularJS过滤器详解及示例代码

    AngularJS过滤器详解及示例代码

    本文主要介绍AngularJS过滤器,这里整理了详细的资料和提供了示例代码及实例效果图,有兴趣的小伙伴可以参考下
    2016-08-08
  • 用AngularJS的指令实现tabs切换效果

    用AngularJS的指令实现tabs切换效果

    这篇文章介绍的是写一个通过指令嵌套实现tabs功能的指令模块,这也是我在一个项目中应用到的,现在分享给大家,有需要的可以参考借鉴。
    2016-08-08

最新评论