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 相关文章推荐
jQuery中实现动画效果的基本操作介绍
Apr 16 Javascript
asp.net刷新本页面的六种方法总结
Jan 07 Javascript
基于JavaScript怎么实现让歌词滚动播放
Nov 03 Javascript
jquery实现简单的全选和反选功能
Jan 02 Javascript
仅30行代码实现Javascript中的MVC
Feb 15 Javascript
jquery+ajax实现直接提交表单实例分析
Jun 17 Javascript
微信小程序之购物车功能
Sep 23 Javascript
深入理解vue $refs的基本用法
Jul 13 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
JS中offset和匀速动画详解
Feb 06 Javascript
深入理解javascript中的this
Feb 08 Javascript
JS中如何优雅的使用async await详解
Oct 05 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中feof()函数实例测试
2014/08/23 PHP
PHP操作FTP类 (上传、下载、移动、创建等)
2016/03/31 PHP
php中遍历二维数组并以表格的形式输出的方法
2017/01/03 PHP
php的扩展写法总结
2019/05/14 PHP
srcElement表格样式
2006/09/03 Javascript
JavaScript-世界上误解最深的语言分析
2007/08/12 Javascript
js 调整select 位置的函数
2008/02/21 Javascript
javascript两段代码,两个小技巧
2010/02/04 Javascript
28个JS验证函数收集
2010/03/02 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
js输入框使用正则表达式校验输入内容的实例
2017/02/12 Javascript
基于JavaScript实现验证码功能
2017/04/01 Javascript
实例学习JavaScript读取和写入cookie
2018/01/29 Javascript
11行JS代码制作二维码生成功能
2018/03/09 Javascript
Vue表单之v-model绑定下拉列表功能
2019/05/14 Javascript
layer 刷新某个页面的实现方法
2019/09/05 Javascript
Python基于matplotlib绘制栈式直方图的方法示例
2017/08/09 Python
5款非常棒的Python工具
2018/01/05 Python
django rest framework 数据的查找、过滤、排序的示例
2018/06/25 Python
python日期相关操作实例小结
2019/06/24 Python
Python实现K折交叉验证法的方法步骤
2019/07/11 Python
Django Rest framework认证组件详细用法
2019/07/25 Python
基于python二叉树的构造和打印例子
2019/08/09 Python
对Django 中request.get和request.post的区别详解
2019/08/12 Python
Python 实现Serial 与STM32J进行串口通讯
2019/12/18 Python
PyCharm无法识别PyQt5的2种解决方法,ModuleNotFoundError: No module named 'pyqt5'
2020/02/17 Python
Python实现病毒仿真器的方法示例(附demo)
2020/02/19 Python
Manjaro、pip、conda更换国内源的方法
2020/11/17 Python
掌上明珠Java程序员面试总结
2016/02/23 面试题
素质拓展感言
2014/01/29 职场文书
保险专业自荐信范文
2014/02/20 职场文书
食品流通安全承诺书
2014/05/22 职场文书
小学安全工作汇报材料
2014/08/19 职场文书
展览会邀请函
2015/02/02 职场文书
公司员工培训管理制度
2015/08/04 职场文书
优秀党员主要事迹材料
2015/11/04 职场文书