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 相关文章推荐
列表内容的选择
Jun 30 Javascript
用jscript实现新建word文档
Jun 15 Javascript
jquery uaMatch源代码
Feb 14 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
Jul 18 Javascript
基于jQuery实现最基本的淡入淡出效果实例
Feb 02 Javascript
浅谈JavaScript字符串拼接
Jun 25 Javascript
文件上传,iframe跨域数据提交的实现
Nov 18 Javascript
js实现下一页页码效果
Mar 07 Javascript
angular-cli修改端口号【angular2】
Apr 19 Javascript
React-Native 组件之 Modal的使用详解
Aug 08 Javascript
基于vue+element实现全局loading过程详解
Jul 10 Javascript
javascript实现倒计时提示框
Mar 02 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
为什么那些咖啡爱好者大多看不上连锁咖啡店?
2021/03/06 咖啡文化
Search File Contents PHP 搜索目录文本内容的代码
2010/02/21 PHP
javascript innerText和innerHtml应用
2010/01/28 Javascript
读jQuery之八 包装事件对象
2011/06/21 Javascript
Jquery Validate 正则表达式实用验证代码大全
2013/08/23 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
2014/09/25 Javascript
JQuery复制DOM节点的方法
2015/06/11 Javascript
JQuery遍历DOM节点的方法
2015/06/11 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
2016/03/21 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
2016/04/03 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
2016/04/12 Javascript
基于原生JS实现图片裁剪
2016/08/01 Javascript
javascript实现的图片预览功能
2017/03/25 Javascript
Vue2.0 UI框架ElementUI使用方法详解
2017/04/14 Javascript
js获取一组日期中最近连续的天数
2017/05/25 Javascript
Koa代理Http请求的示例代码
2018/10/10 Javascript
vue-cli安装使用流程步骤详解
2018/11/08 Javascript
关于vue的npm run dev和npm run build的区别介绍
2019/01/14 Javascript
layui 阻止图片上传的实例(before方法)
2019/09/26 Javascript
vue resource发送请求的几种方式
2019/09/30 Javascript
Websocket 向指定用户发消息的方法
2020/01/09 Javascript
js+canvas实现纸牌游戏
2020/03/16 Javascript
Jquery $.map使用方法实例详解
2020/09/01 jQuery
Python基于smtplib实现异步发送邮件服务
2015/05/28 Python
在Linux系统上安装Python的Scrapy框架的教程
2015/06/11 Python
详解python中asyncio模块
2018/03/03 Python
win10子系统python开发环境准备及kenlm和nltk的使用教程
2019/10/14 Python
Python猜数字算法题详解
2020/03/01 Python
韩国流行时尚女装网站:Dintchina(中文)
2018/07/19 全球购物
捷克移动配件网上商店:ProMobily.cz
2019/03/15 全球购物
美国智能家居专家:tink
2019/06/04 全球购物
计划生育宣传标语
2014/06/21 职场文书
2015年农村党员干部主题教育活动总结
2015/03/25 职场文书
天鹅湖观后感
2015/06/09 职场文书
无故旷工检讨书
2015/08/15 职场文书
Springboot如何同时装配两个相同类型数据库
2021/11/17 Java/Android