验证添加信息，判断数字，长度等(week3)

最新推荐文章于 2022-03-22 20:43:13 发布

原创最新推荐文章于 2022-03-22 20:43:13 发布 · 439 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个使用AngularJS实现的简单资产管理应用，该应用允许用户添加新的资产记录并搜索已有的资产信息。通过AngularJS框架的强大功能，实现了客户端的数据管理和交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js"></script>
<script src="js/jquery-1.11.1.js"></script>
<style>
table{
width: 600px;
text-align: center;
}
td{
border: 1px solid black;
}
form{
width: 800px;
margin-top: 30px;
}
form input{
margin-top: 15px;
}
ul li{
color:red;
}
</style>
<script>
var myapp=angular.module("dxtapp",[]);
myapp.controller("demo1",["$scope",function($scope){

$scope.toadd=false;
$scope.goods=[
{id:10011120,name:"iphoneX",number:99},
{id:10011121,name:"华为mate10",number:20},
{id:10011122,name:"vivoR12",number:55},
];
//添加
$scope.add=function(){
$scope.error_val=[];
var reg_id=/^\d{8,8}$/;//只能8位数字
//验证编号
if(!reg_id.test($scope.uid)){
$scope.error_val.push("资产编号必须是数字且长度为8位");
}
//验证名称
if($scope.uname==undefined || $scope.uname==""){
$scope.error_val.push("资产名称不能为空");
}else{
for(var i in $scope.goods){
if($scope.uname==$scope.goods[i].name){
$scope.error_val.push("资产名称已经存在");
break;
}
}
}
//验证资产数量
var reg_num=/^\d{1,}$/;
if(!reg_num.test($scope.unumber)){
$scope.error_val.push("资产编号必须为纯数字");
}else{
if($scope.unumber<=0){
$scope.error_val.push("资产编号数量必须大于0");
}
}
//何时添加，何时不添加
if($scope.error_val.length==0){
$scope.goods.push({
id:$scope.uid,
name:$scope.uname,
number:$scope.unumber,
});
}
};
//搜索
$scope.search=function(){
if($scope.sel==undefined || $scope.sel==""){
alert("输入内容不能为空");
return;
}
for(var i=0; i<$scope.goods.length;i++){
if($scope.goods[i].name==$scope.sel){
alert("搜到相关内容");
return true;
}
}
alert("未搜索到相关内容");
};
}])
</script>
</head>
<body ng-app="dxtapp" ng-controller="demo1">
<center>
<p>资产登记</p>
<button ng-click="toadd=true" style="margin-right: 600px;">添加</button><br />
<span style="margin-left: 300px;">资产搜索</span><input ng-model="sel"/>
<button ng-click="search()">搜索</button>
<table border="1" cellspacing="0">
<tr>
<td>资产编号</td>
<td>资产名称</td>
<td>资产数量</td>
</tr>
<tr ng-repeat="g in goods">
<td>{{g.id}}</td>
<td>{{g.name}}</td>
<td>{{g.number}}</td>
</tr>
</table><br />
<form ng-show="toadd">
资产编号<input type="text" ng-model="uid" /><br />
资产名称<input type="text" ng-model="uname" /><br />
资产数量<input type="text" ng-model="unumber" /><br />
<div>
<ul>
<li ng-repeat="e in error_val">
{{e}}
</li>
</ul>
</div>
<button ng-click="add()" style="margin-top: 15px;">资产录入</button>
</form>
</center>
</body>
</html>