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 相关文章推荐
javascript 新浪背投广告实现代码
Jul 07 Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
Sep 13 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
Jan 15 Javascript
js+数组实现网页上显示时间/星期几的实用方法
Jan 18 Javascript
jQuery遮罩层效果实例分析
Jan 14 Javascript
基于BootStarp的Dailog
Apr 28 Javascript
JavaScript定时器setTimeout()和setInterval()详解
Aug 18 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
Sep 07 Javascript
Vue实现点击显示不同图片的效果
Aug 10 Javascript
vue实现div单选多选功能
Jul 16 Javascript
vue 弹出遮罩层样式实例
Jul 22 Javascript
深入详解JS函数的柯里化
Jun 09 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 adodb分页实现代码
2009/03/19 PHP
探究Laravel使用env函数读取环境变量为null的问题
2016/12/06 PHP
ThinkPHP中获取指定日期后工作日的具体日期方法
2018/10/14 PHP
RR vs IO BO3 第一场2.13
2021/03/10 DOTA
juqery 学习之四 筛选查找
2010/11/30 Javascript
日历查询的算法 如何计算某一天是星期几
2012/12/12 Javascript
使用jquery实现IE下按backspace相当于返回操作
2014/03/18 Javascript
浅析js中substring和substr的方法
2015/11/09 Javascript
基于jquery实现简单的分页控件
2016/03/17 Javascript
关于JavaScript 原型链的一点个人理解
2016/07/31 Javascript
jQuery中的deferred对象和extend方法详解
2017/05/08 jQuery
使用Node搭建reactSSR服务端渲染架构
2018/08/30 Javascript
vue使用showdown并实现代码区域高亮的示例代码
2019/10/17 Javascript
JS严格模式原理与用法实例分析
2020/04/27 Javascript
[36:16]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.19
2020/12/24 DOTA
天翼开放平台免费短信验证码接口使用实例
2013/12/18 Python
浅析Python中的join()方法的使用
2015/05/19 Python
python通过ssh-powershell监控windows的方法
2015/06/02 Python
Python基于matplotlib实现绘制三维图形功能示例
2018/01/18 Python
深入浅析Python 中 is 语法带来的误解
2019/05/07 Python
itchat-python搭建微信机器人(附示例)
2019/06/11 Python
python简单鼠标自动点击某区域的实例
2019/06/25 Python
Python实现Mysql数据统计及numpy统计函数
2019/07/15 Python
python实现文件批量编码转换及注意事项
2019/10/14 Python
Python3读写Excel文件(使用xlrd,xlsxwriter,openpyxl3种方式读写实例与优劣)
2020/02/13 Python
python怎么判断素数
2020/07/01 Python
详解CSS的border边框属性及其在CSS3中的新特性
2016/05/10 HTML / CSS
HTML5 创建canvas元素示例代码
2014/06/04 HTML / CSS
澳大利亚领先的武术用品和健身器材供应商:SMAI
2019/03/24 全球购物
英国最大的独立摄影零售商:Park Cameras
2019/11/27 全球购物
Crocs欧洲官网:Crocs Europe
2020/01/14 全球购物
中药学专业求职信
2014/05/31 职场文书
2014年稽查工作总结
2014/12/20 职场文书
2015年上半年物业工作总结
2015/03/30 职场文书
大国崛起日本观后感
2015/06/02 职场文书
高端收音机+蓝牙音箱,JBL TUNER FM带收音蓝牙音箱评测
2021/04/24 无线电