Angular简单验证功能示例


Posted in Javascript onDecember 22, 2017

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

先来看看运行效果:

Angular简单验证功能示例

完整实例代码如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>3water.com 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>
Javascript 相关文章推荐
JS获取dom 对象 ajax操作 读写cookie函数
Nov 18 Javascript
js文本框输入点回车触发确定兼容IE、FF等
Nov 19 Javascript
深入分析JQuery和JavaScript的异同
Oct 23 Javascript
浅析javascript 定时器
Dec 23 Javascript
jQuery仿天猫实现超炫的加入购物车
May 04 Javascript
JavaScript中点击事件的写法
Jun 28 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
Jul 07 Javascript
解析Vue2.0双向绑定实现原理
Feb 23 Javascript
JavaScript数据结构之链表的实现
Mar 19 Javascript
详解小程序input框失焦事件在提交事件前的处理
May 05 Javascript
Openlayers显示地理位置坐标的方法
Sep 28 Javascript
微信小程序实现首页弹出广告
Dec 03 Javascript
Angular实现的table表格排序功能完整示例
Dec 22 #Javascript
详解Vue中localstorage和sessionstorage的使用
Dec 22 #Javascript
vue + element-ui实现简洁的导入导出功能
Dec 22 #Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
Dec 22 #Javascript
js读取本地文件的实例
Dec 22 #Javascript
javascript将json格式数组下载为excel表格的方法
Dec 22 #Javascript
原生js实现移动端触摸轮播的示例代码
Dec 22 #Javascript
You might like
PHP实现异步调用方法研究与分享
2011/10/27 PHP
ThinkPHP关于session的操作方法汇总
2014/07/18 PHP
PHP获取mysql数据表的字段名称和详细信息的方法
2014/09/27 PHP
PHP利用func_get_args和func_num_args函数实现函数重载实例
2014/11/12 PHP
PHP高效获取远程图片尺寸和大小的实现方法
2017/10/20 PHP
PHP大文件分片上传的实现方法
2018/10/28 PHP
php过滤htmlspecialchars() 函数实现把预定义的字符转换为 HTML 实体用法分析
2019/06/25 PHP
PHP字符串与数组处理函数用法小结
2020/01/07 PHP
JQuery 无废话系列教程(一) jquery入门 [推荐]
2009/06/23 Javascript
js简单实现让文本框内容逐个字的显示出来
2013/10/22 Javascript
ie8下修改input的type属性报错的解决方法
2014/09/16 Javascript
JS控制弹出新页面窗口位置和大小的方法
2015/03/02 Javascript
window.onload与$(document).ready()的区别分析
2015/05/30 Javascript
javascript数组遍历的方法实例分析
2016/09/13 Javascript
实例详解display:none与visible:hidden的区别
2017/03/30 Javascript
ES6学习教程之对象的扩展详解
2017/05/02 Javascript
jquery动态赋值id与动态取id方法示例
2017/08/21 jQuery
关于Vue实现组件信息的缓存问题
2017/08/23 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
2019/06/18 Javascript
关于Vue中axios的封装实例详解
2019/10/20 Javascript
vue移动端下拉刷新和上滑加载
2020/10/27 Javascript
[58:46]OG vs NAVI 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
pyqt5 使用cv2 显示图片,摄像头的实例
2019/06/27 Python
CSS 3.0 结合video视频实现的创意开幕效果
2020/06/01 HTML / CSS
波兰运动鞋网上商店:e-Sporting
2018/02/16 全球购物
英国最出名高街品牌:Forever Unique
2018/02/24 全球购物
为娇小女性量身打造:Petite Studio
2018/11/01 全球购物
英国邮购活的植物主要供应商:Gardening Direct
2019/01/28 全球购物
GetYourGuide台湾:预订旅游活动、景点和旅游项目
2019/06/10 全球购物
国税会议欢迎词
2014/01/16 职场文书
单位租房协议书范本
2014/12/04 职场文书
2015应届毕业生求职信范文
2015/03/20 职场文书
2015年度企业工作总结
2015/05/21 职场文书
2016大一新生入学教育心得体会
2016/01/23 职场文书
Android开发之WECHAT微信小程序路由跳转的两种形式
2022/04/12 Java/Android
CSS实现背景图片全屏铺满自适应的3种方式
2022/07/07 HTML / CSS