angular 验证（判断重复）

最新推荐文章于 2024-05-20 14:52:21 发布
最新推荐文章于 2024-05-20 14:52:21 发布
阅读量2.2k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39599065/article/details/78842915
版权




<!DOCTYPE html>
<html>

 <head>
  <meta charset="utf-8" />
  <title></title>
  <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/jquery-1.11.1.js" type="text/javascript" charset="utf-8"></script>

  <script>
   var app = angular.module("myapp", []);
   app.controller("my", function($scope) {
    $scope.add = false;
    //模拟数据
    $scope.user = [{
     id: 10011120,
     mingcheng: "iphoneX",
     shuliang: 99
    }, {
     id: 10011121,
     mingcheng: "华为10",
     shuliang: 20
    }, {
     id: 10011122,
     mingcheng: "vivoR12",
     shuliang: 55
    }];
    //添加
    $scope.tijiao = function() {
     var id = $scope.id;
     var mingcheng = $scope.mingcheng;
     var shuliang = $scope.shuliang;
     var re = /^\d{8,8}$/;
     var re1 = /^\d{1,}$/;
     //验证编号
     if(!re.test(id)) {
      alert("资产编号必须为数字且长度为8位");
      return;
     }
     //判断名称
     if(mingcheng == undefined || mingcheng == "") {
      alert("资产名称不能为空");
      return;
     } else {
      for(var i = 0; i < $scope.user.length; i++) {
       var u = $scope.user[i].mingcheng;
       if(u == mingcheng) {
        alert("该资产已存在");
        return;
       }
      }
     }
     //验证资产数量
     if(!re1.test(shuliang)) {
      alert("资产数量必须为纯数字");
      return;
     }
     //隐藏添加框
     $scope.add = false;
     $scope.user.push({
      id: id,
      mingcheng: mingcheng,
      shuliang: shuliang
     })

    }
    
    
    
    //搜素
    $scope.ss = function($event) {
     for(var i = 0; i < $scope.user.length; i++) {
      var mc = $scope.user[i].mingcheng;
     }
     if(mc == $scope.mingchengcha) {
      alert("搜到内容");
      return;
     } else {
      alert("未搜到内容");
      return;
     }
    }

   })
  </script>

 </head>
 <body ng-app="myapp" ng-controller="my" style="margin-top: 50px;">
  资产搜素：
  <input type="text" ng-model="mingchengcha" />
  <input type="button" ng-click="ss()" value="搜素" />
  <button ng-click="add = true">添加资产</button>
  <table border="1" style="text-align: center;">
   <tr>
    <td>资产编号</td>
    <td>资产名称</td>
    <td>资产数量</td>
   </tr>


   <tr ng-repeat="i in user | filter:{'mingcheng':mingchengcha}">
    <td>{{i.id}}</td>
    <td>{{i.mingcheng}}</td>
    <td>{{i.shuliang}}</td>
   </tr>
  </table>

  <form ng-show="add">
   资产编号：<input type="text" ng-model="id"/><br />
   资产名称：<input type="text" ng-model="mingcheng" /><br />
   资产数量：<input type="text" ng-model="shuliang" /><br />
   <button ng-click="tijiao()">资产录入</button>
  </form>
 </body>
</html>








第二种：用div显示错误信息




<!DOCTYPE html>
<html>

 <head>
  <meta charset="UTF-8">
  <title>anglar为核心验证</title>
  <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
  <style>
   ul li {
    color: red;
   }
  </style>

  <script>
   angular.module("myapp", [])
    .controller("my", function($scope) {
     //模拟数据
     $scope.user = [{
       id: 10011120,
       name: "iphoneX",
       num: 99
      },
      {
       id: 10011121,
       name: "华为mate10",
       num: 20
      },
      {
       id: 10011122,
       name: "vivoR12",
       num: 55
      }
     ];
     //提交
     $scope.tijiao = function() {
      //创建一个存放错误信息数组
      $scope.cuo = [];
      //判断编号
      var id = /^\d{8,8}$/; //只能8位数字
      if(!id.test($scope.id)) {
       $scope.cuo.push("资产编号格式，必须为数字，且长度为8位");
      }

      //资产名称
      if($scope.name == undefined || $scope.name == "") {
       $scope.cuo.push("资产名称不能为空!");
      } else {
       for(var i in $scope.user) {
        if($scope.name == $scope.user[i].name) {
         $scope.cuo.push("资产名称已经存在");
         break; //结束循环,已经查找到资产名称不合法
        }
       }
      }

      //资产数量
      var num = /^\d{1,}$/; //只能8位数字
      if(!num.test($scope.num)) {
       $scope.cuo.push("资产编号数量，必须为数字");
      } else {
       if($scope.num <= 0) {
        $scope.cuo.push("资产编号数量必须大于0");
       }
      }

      //何时添加进行,何时不添加
      if($scope.cuo.length == 0) {
       $scope.user.push({
        id: $scope.id,
        name: $scope.name,
        num: $scope.num
       });
      }
     }

    })
  </script>
 </head>

 <body ng-app="myapp" ng-controller="my">
  <table border="1">
   <tr>
    <td>资产编号</td>
    <td>资产名称</td>
    <td>资产数量</td>
   </tr>
   <tr ng-repeat="i in user">
    <td>{{i.id}}</td>
    <td>{{i.name}}</td>
    <td>{{i.num}}</td>
   </tr>
  </table>
  <div>
   <form>
    资产编号：<input ng-model="id" /> <br /> 资产名称：
    <input ng-model="name" /> <br /> 资产数量：
    <input ng-model="num" /><br />

    <div>
     <ul>
      <li ng-repeat="i in cuo">
       {{i}}
      </li>
     </ul>
    </div>

    <button ng-click="tijiao()">资产录入</button>
   </form>
  </div>
 </body>

</html>

凉笙默染
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
AngularJs验证重复密码的方法(两种)
10-21
本文给大家介绍angularjs验证重复密码的两种方法，每种方法都有各自的优缺点，大家可以根据需要选择一种方法，具体内容详情大家通过本文详细了解下吧
angular 表单验证
李卓书
05-10 1743
angular表单验证
Angular-2-循环语句
最新发布
qq_48913469的博客
05-20 102
2.switch循环判断应该渲染哪个部分。
java中字段值重复校验,Angular FormArray - 重复值验证器
weixin_39928106的博客
03-10 403
我正在使用带反应形式的Angular 6 . 其中一个表单字段是FormArray，它在用户单击“添加”按钮时添加控件 .在FormArray中，我想检查FormArray中是否已存在FormControl值 .这可以正常工作，直到用户单击“添加”按钮重置上一个控件错误并将控件标记为有效，尽管它仍然具有重复值 .这是在窗体数组中添加控件的函数：onAddIPAddress() {if (( &lt...
angular的equals
weixin_30708329的博客
04-28 203
判断二者值是否相同，angular 提供了一个 api ：angular.equals(a, b)，接两个参数。 基本数据类型，它直接比较值，这一点我们可以直接用 “==” 来判断。之所以记录它，说明它强大的地方：判断两个对象是否相等。 如果我们用两个对象做 == 判断，只要布置一方赋值给另一方，那么他们的存储地址永远都不会相同，也就是说 “==” 比较的仅仅是值，而 equals 可以比较引...
angularjs自定义指令检验两次输入的密码是否一致
Ω半个草莓Ω
11-16 490
一、angularjs自定义指令检验两次输入的密码是否一致 [code="js"] 'use strict'; ResetPasswordApp.directive('pwCheck', [function () { return { restrict: 'A', require: "ngModel", link: func...
js常用函数及客户端验证
07-29
5. **自定义函数验证**：编写特定的验证函数，根据业务需求进行复杂判断，例如验证密码强度。 在Web开发中，我们还需要了解一些与JavaScript交互相关的工具和概念： 1. **jQuery库**：简化DOM操作，提供动画效果和...
JavaScript客户端验证和高级特效制作.doc
06-02
JavaScript是一种广泛应用于网页和网络应用开发的脚本语言，它...随着技术的发展，JavaScript还延伸出了Node.js等后端开发框架，以及React、Vue、Angular等前端框架，使得开发者能够构建更加复杂和高性能的Web应用。
精通AngularJS part1
10-10
验证重复输入159 58处理传统的HTML表单提交161 直接向服务器提交表单161 处理表单提交事件161 使用ngSubmit处理表单提交162 使用ngClick处理表单提交162 59重置用户信息表单162 510摘要164 第6章导航165 61...
lois2.github.io
04-09
3. **数值计算**：如果解析后的公式能进行数值计算，JavaScript可以使用内置的`Math`对象或第三方库（如`numeric.js`）来计算公式的结果，然后比较两个结果的近似值，判断它们在数值上是否等同。 4. **用户界面**：...
前端开源库-indeed
08-30
总结来说，indeed是一个针对前端开发的开源库，尤其在Node.js环境中提供布尔助手功能，帮助开发者更轻松地处理逻辑判断和数据验证。通过探索indeed-master压缩包，我们可以深入了解其工作原理，并将其应用到实际项目...
网页中使用传统方法实现异步校验详解
07-12
本工程旨在研究如何使用传统方法异步验证用户名的唯一性的功能。 本工程编码方式：UTF-8
angularjs数据重复,查询数据是否存在
L59_1的博客
12-20 728
数据的增加,查询,添加数据如果重复,提示数据重复,如果不重复则添加数据,查询数据是否存在,如果存在,提示数据存在,如果不存在就提示数据不存在<title></title><script type="text/javascript" src="../angular/angular.min.js"></script> <script type="text/javascript">
angularjs 验证用户名是否重复
weixin_30276935的博客
04-06 221
　　对于一个需要验证唯一性的字段 　　html 代码： <form class="form-horizontal" novalidate ng-submit="addSendDepartments()" role="form" name="addForm"> <input type="text" ng-model="name" ensure-uniqu...
angular使用进一步总结2
Bidding
10-05 465
angular核心特性---Module config-routes filter directive factory-service-provider-value controller 官方推荐的模块切分方式： controller directive services routes ...
NG-ZORRO的form不验证多选解决方法之一
jijunqing321的博客
01-04 1134
解决使用angular的NG-ZORRO UI框架，form组件不验证多选问题
判断input输入内容是否有重复
weixin_43923202的博客
12-04 3135
一.数组findIndex方法 findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。 let number = this.items.findIndex(item=>item===this.content) if(number < 0){ this.items.push(this.content) } else { alert(‘不能重复添加’) } ...
js用==比较两个相等的字符串时，报错
MOONCOM的博客
11-28 6700
问题描述：今天我在js中比较两个两个字符串时，发现明明值相等的两个变量，在if else语句中，却不进入if中，而是去else中运行。 代码如下： var checkedLanguage=$("#checked-language").text(); if(' en_US '==checkedLanguage){ $("span#checked-en").css('display','in
30.2 Java进阶之反射查看属性的值，查看任意对象的内部信息
c1776167012的博客
05-12 603
如果field是一个Field类型的对象，obj是某个包含field的类的对象，则field.get(obj)将返回一个对象，其就是obj名为field.getName()的属性的当前值。除此之外我们还可以调用field.set(obj,value)；通过上面的学习，我们可以使用反射机制来写出通用的toString程序来打印出任意对象的所有的属性值信息。利用反射机制可以查看在编译时还不清楚的对象域，就是具体运行时才能获取到的属性的值。可以再程序运行时获取对象属性值，其中的关键是Field类中的get方法。
angular表单验证
05-12
Angular 表单验证是一种在 Web 应用程序中对用户输入进行验证的方法。它可以防止用户在提交表单之前输入不正确的数据。在 Angular 中，表单验证是通过构建验证器函数并将其应用于表单控件来完成的。以下是一个简单的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值