Angular简单验证功能示例
更新时间：2017年12月22日 11:24:54 作者：qq_41073714
这篇文章主要介绍了Angular简单验证功能,涉及AngularJS事件响应、正则判定、页面元素属性动态修改等相关操作技巧,需要的朋友可以参考下
本文实例讲述了Angular简单验证功能。分享给大家供大家参考，具体如下：
先来看看运行效果：
完整实例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>www.jb51.net 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>
PS：这里再为大家提供2款非常方便的正则表达式工具供大家参考使用：
JavaScript正则表达式在线测试工具：
http://tools.jb51.net/regex/javascript
正则表达式在线生成工具：
http://tools.jb51.net/regex/create_reg
更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
相关文章
AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。本文重点给大家介绍AngularJs页面筛选标签小功能，非常不错，需要的朋友可以参考下2016-08-08
这篇文章主要介绍了Angular.js 实现数字转换汉字实例代码的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-07-07
今天小编就为大家分享一篇angularJs中$http获取后台数据的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
有时候在开发的过程中发现一个Angular项目不太够用,两个独立的项目又不太好复用,这时便需要将原来的Angular项目简单做个升级,这篇文章主要给大家介绍了关于将Angular单项目升级为多项目的相关资料,需要的朋友可以参考下2021-11-11
这篇文章主要介绍了AngularJS之数据绑定用法,结合实例形式分析了AngularJS基于内置指令ng-model实现数据绑定的操作技巧,需要的朋友可以参考下2016-11-11
能够验证用户在表单中输入的内容是否合理与正确是十分重要的，这篇文章主要介绍了ionic使用angularjs表单验证（模板验证），具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
在涉及GUI程序开发的过程中，常常有模态对话框以及非模态对话框的概念。接下来通过本文给大家介绍AngularJS 模态对话框 ，感兴趣的朋友一起学习吧2016-04-04
这篇文章主要介绍了Angular4学习笔记之准备和环境搭建项目，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
Promise是一个构造函数，自己身上有all、reject、resolve这几个异步方式处理值的方法，原型上有then、catch等同样很眼熟的方法，下面通过实例代码给大家讲解angularjs promise 的相关知识，感兴趣的朋友一起看看吧2018-03-03
下面小编就为大家带来一篇Angular移动端页面input无法输入的解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
最新评论