点击按钮添加文字 - 实现查询功能 - 实现敏感字符限制功能 - 实现输入比为空判断
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- css布局样式调整 --> <style> div{ width: 500px; height:350px; border: 1px solid #000; } .a{ margin-left: 150px; } .b{ margin-left: 250px; } li{ list-style:none; } body{ background-color: #D0EEFF; background-size:100%; } input{ padding: 4px 10px; height: 20px; line-height: 20px;/*设置行高*/ position: relative;/*相对定位*/ cursor: pointer;/*设定浏览器中的鼠标显示样式*/ color: #888; background: #fafafa; border: 1px solid #ddd; border-radius: 4px;/*圆角矩形*/ overflow: hidden;/*内容溢出隐藏*/ display: inline-block;/*设定行级标签可以设置宽高*/ *display: inline;/*设置对象做为行内元素显示*/ *zoom: 1/*设置或检索对象的缩放比例*/ } button{ position: relative; display: inline-block; background: #D0EEFF; border: 1px solid #99D3F5; border-radius: 4px; padding: 4px 12px; overflow: hidden; color: #1E88C7; text-decoration: none;/*文字样式：不设置*/ text-indent: 0;/*规定文本块中首行文本的缩进*/ line-height: 20px; } </style> <script src="http://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script> <!-- angularJS样式 --> <script> var myapp=angular.module("myapp",[]); myapp.controller("myCtrl",function ($scope) { //设置数组 $scope.data=["早上花了5元钱吃早饭","中午花了20元钱吃午饭"]; //点击记录判断 $scope.start=""; $scope.add=function () { if($scope.start==""){ alert("输入内容不能为空"); } for(var i=0;i<$scope.data.length;i++){ if($scope.start==$scope.data[i]){ alert("您记录的内容已经在") } } //输入内容敏感字符判断 if($scope.start.indexOf("#")!=-1||$scope.start.indexOf("$")!=-1||$scope.start.indexOf("%")!=-1||$scope.start.indexOf("^")!=-1||$scope.start.indexOf("&")!=-1||$scope.start.indexOf("*")!=-1){ alert("有敏感字符，请重新输入"); }else{ $scope.data.unshift($scope.start); } } //点击查询判断 $scope.end=""; $scope.selete=function () { if($scope.end==""){ alert("输入内容不能为空"); } if($scope.end.indexOf("#")!=-1||$scope.end.indexOf("$")!=-1||$scope.end.indexOf("%")!=-1||$scope.end.indexOf("^")!=-1||$scope.end.indexOf("&")!=-1||$scope.end.indexOf("*")!=-1){ alert("有敏感字符，请重新输入"); }else{ //搜索的判断 for(var i=0;i<$scope.data.length;i++){ if($scope.end==$scope.data[i]){ alert("搜索到相关内容") break; }else{ alert("未搜到相关内容") break; } } } } }) </script> </head> <body ng-app="myapp" ng-controller="myCtrl"> <p>记账本</p> <div> <ul ng-repeat="item in data"> <li>{{item}}</li> </ul> </div> <span class="a">输入框</span><input type="text" ng-model="start"><br> <button class="b" ng-click="add()">记录</button><br> <span class="a">搜索框</span><input type="text" ng-model="end"><br> <button class="b" ng-click="selete()">搜索</button> </body> </html>