使用 AngularJS+Route路由+jQuery非空验证 切换不同按钮显示不同html页面功能
来源：互联网 发布：淘宝访问受限怎么解决 编辑：程序博客网 时间：2024/06/07 07:29
效果图：
1. 主代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>使用 AngularJS+Route路由+jQuery非空验证 切换不同按钮显示不同html页面功能</title> <style type="text/css"> .leftSide{ width: 18%; float: left; height: 600px; display: inline-block; background-color: #ffc900; } .rightSide{ width: 82%; float: right; height: 600px; display: inline-block; background-color: #00FA9A; } li{ font-size: 30px; font-family: 楷体; margin-left: -40px; list-style-type: none; border: 1px solid blue; padding: 37px 0px 37px 90px; } li a{ text-decoration: none; } </style> <!-- 1.导入库文件 --> <script src="../../js/angular.js"></script> <script src="../../js/angular-route.js"></script> <script> // 2.注入路由服务 var app = angular.module("myApp",['ngRoute']); // 3.在config函数中配置路由规则 app.config(["$routeProvider",function ($routeProvider) { //使用路由服务对象，配置路由规则 $routeProvider .when("/register",{ controller:"registerCtrl", templateUrl:"register.html" }) .when("/main",{ controller:"mainCtrl", templateUrl:"main.html" }) .when("/game",{ controller:"gameCtrl", templateUrl:"game.html" }) .when("/mine",{ controller:"mineCtrl", templateUrl:"mine.html" }) .when("/setting",{ controller:"settingCtrl", templateUrl:"setting.html" }) .otherwise({redirectTo:"/register"}); }]); // 4. 主控制器 app.controller("myCtrl",function ($scope) { }); // 注册页面控制器，验证用户信息 app.controller("registerCtrl",function ($scope) { $scope.name = ""; $scope.pwd = ""; $scope.age = ""; $scope.sex = ""; $scope.tel = ""; $scope.register = function () { $scope.flag1 = false; $scope.flag2 = false; $scope.flag3 = false; $scope.flag4 = false; $scope.flag5 = false; $scope.flag6 = false; $scope.flag7 = false; if ($scope.name == null || $scope.name == ""){ alert("姓名不得为空！"); }else { $scope.flag1 = true; } if ($scope.pwd == null || $scope.name == "" || $scope.pwd.length<6){ alert("密码长度不能小于6位！"); }else { $scope.flag2 = true; } if ($scope.age == null || $scope.age == ""){ alert("年龄不得为空！"); }else { $scope.flag3 = true; } if ($scope.sex == null || $scope.sex == ""){ alert("性别不得为空！"); }else if($scope.sex != "男" && $scope.sex != "女"){ alert("请正确填写性别！"); }else { $scope.flag4 = true; } if ($scope.tel == null || $scope.tel == ""){ alert("联系方式不得为空！"); }else if( $scope.tel.length < 7 || $scope.tel.length > 11){ alert("联系方式所填内容长度必须是7-11位！"); }else { $scope.flag5 = true; } //判断手机号和年龄是否包含字母（汉字） //定义正则表达式 var reg = /\D/; if(reg.test($scope.tel)) { alert("联系方式不能含字母！"); }else { $scope.flag6 = true; } if(reg.test($scope.age)) { alert("年龄不能含字母！"); }else { $scope.flag7 = true; } if($scope.flag1 == true && $scope.flag2 == true && $scope.flag3 == true && $scope.flag4 == true && $scope.flag5 == true && $scope.flag6 == true && $scope.flag7 == true ){ alert("注册成功！"); //注册成功后清空信息 var inputs = document.getElementsByTagName("input"); for(i=0;i<inputs.length;i++){ inputs.item(i).value = ""; } } } }); // 首页 页面控制器，验证用户信息 app.controller("mainCtrl",function ($scope) { /*声明数据对象，初始化用户信息，数据自拟且不低于四条*/ $scope.users = [ { id: 1, name:"金晨", pwd:"123456", age: 21, sex:"女", tel:13100000000, state:false }, { id: 2, name:"金莎", pwd:"234567", age: 23, sex:"女", tel:13200000000, state:false }, { id: 3, name:"吴京", pwd:"345678", age: 43, sex:"男", tel:13300000000, state:false }, { id: 4, name:"胡歌", pwd:"456789", age: 36, sex:"男", tel:13400000000, state:false }, { id: 5, name:"彭于晏", pwd:"567890", age:35 , sex:"男", tel:13500000000, state:false } ]; //点击删除按钮的函数:点击删除按钮时弹出提示框询问用户确定删除，用户点击确定删除后该条数据在页面被删除。 $scope.deleteRow = function (index) { if(confirm("确定删除此项吗？")){ $scope.users.splice(index,1); } } //点击批量删除按钮的函数：用户没有选中任意复选框时点击批量删除按钮提示用户先进行选中要删除的商品信息 $scope.deleteNum = function () { //定义空数组，保存选中项的name var arr = []; //根据下标遍历数据源，把选中项的名字添加到数组中。 for(index in $scope.users){ //判断选项是否为选中的的状态？ if($scope.users[index].state){ arr.push($scope.users[index].name); } } //遍历含有选中项name属性的数组。有多少个被选中，数据源就会被遍历多少遍。 if (arr.length > 0){ if (confirm("是否删除选中项？")){ for (x in arr) { //对比选中项的名字在数组中的角标，根据角标删除当前对象，删一个数据源少一个。 for (y in $scope.users) { if (arr[x] == $scope.users[y].name) { $scope.users.splice(y, 1); } } } } }else { alert("请选择要删除的用户信息！"); } } //复选框全选按钮的全选方法 $scope.selectAll = false; $scope.selectAllFun = function () { if ($scope.selectAll){ //如果点击全选按钮，就把数组的state状态变为true for(index in $scope.users){ $scope.users[index].state = true; } }else { for(index in $scope.users){ $scope.users[index].state = false; } } } //根据数组的角标检测内容是否全选 $scope.checkSelect = function (index) { var temp = 0; if($scope.users[index].state == true){ temp++; }else { temp--; } if (temp == $scope.users.length){ $scope.selectAll = true; }else { $scope.selectAll = true; } var checkState = false; for(i in $scope.users){ if($scope.users[i].state == true){ }else { checkState = true; } } if(checkState){ $scope.selectAll = false; }else { $scope.selectAll = true; } } //判断年龄范围 $scope.ageSize = "---请选择---"; $scope.ageSizeFun = function (age,ageSize) { if(ageSize == "---请选择---"){ return true; }else{ var arr = ageSize.split("-"); var ageMin = arr[0]; var ageMax = arr[1]; if(age >= ageMin && age <= ageMax){ return true; }else { return false; } } } //判断性别 $scope.sexSize = "---请选择---"; $scope.sexSizeFun = function (sex,sexSize) { if(sexSize == "---请选择---"){ return true; }else{ if (sexSize == sex){ return true; }else { return false; } } } }); </script></head><body ng-app="myApp" ng-controller="myCtrl"> <!-- 显示 左侧按钮 菜单栏 --> <div class="leftSide"> <ul> <li><a href="#/register">注册</a></li> <li><a href="#/main">首页</a></li> <li><a href="#/game">游戏</a></li> <li><a href="#/mine">个人</a></li> <li><a href="#/setting">设置</a></li> </ul> </div> <!-- 显示 右侧html页面内容 菜单栏 --> <div class="rightSide" ng-view> </div></body></html>
2. main.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>主页面</title></head><body> <center> <h2>用户信息查询表</h2> <div> 姓名：<input type="text" placeholder="请输入姓名" size="10" ng-model="ming"/> 年龄：<select ng-model="ageSize"> <option>---请选择---</option> <option>11-20</option> <option>21-30</option> <option>31-40</option> <option>41-50</option> <option>51-60</option> </select> 性别：<select ng-model="sexSize"> <option>---请选择---</option> <option>男</option> <option>女</option> </select> <button ng-click="deleteNum()" >批量删除</button> <br/><br/> </div> <table border="1px soild yellow" cellpadding="18" cellspacing="0"> <thead> <tr> <th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"/></th> <th>id</th> <th>姓名</th> <th>密码</th> <th>年龄</th> <th>性别</th> <th>联系方式</th> <th>操作</th> </tr> </thead> <tbody> <!-- 用ng-repaet指令将对象遍历并渲染到页面中 --> <!-- filter指令实现模糊查询name的功能。用户在输入框中键入信息的时候商品列表会动态显示符合要求的查询信息 --> <tr ng-repeat="user in users | filter:{name:ming}" ng-model="user.state" ng-if="ageSizeFun(user.age,ageSize)" ng-show="sexSizeFun(user.sex,sexSize)" align="center"> <td><input type="checkbox" ng-click="checkSelect($index)" ng-model="user.state"/></td> <td>{{user.id}}</td> <td>{{user.name}}</td> <td>{{user.pwd}}</td> <td>{{user.age}}</td> <td>{{user.sex}}</td> <td>{{user.tel}}</td> <!-- 点击删除按钮，删除整行数据的点击事件 --> <td><button ng-click="deleteRow($index)">删除</button></td> </tr> </tbody> </table> </center></body></html>
3. register.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>注册页面</title></head><body> <center> <h3>用户注册信息提交表</h3> <table border="1px soild blue" cellpadding="18" cellspacing="0"> <tbody> <tr> <th>姓名：</th> <td><input type="text" ng-model="name" placeholder="请输入姓名"/></td> </tr> <tr> <th>密码：</th> <td><input type="password" ng-model="pwd" placeholder="请输入密码"/></td> </tr> <tr> <th>年龄：</th> <td><input type="text" ng-model="age" placeholder="请输入年龄"/></td> </tr> <tr> <th>性别：</th> <td><input type="text" ng-model="sex" name="sex" placeholder="请输入性别"/> </td> </tr> <tr> <th>联系方式：</th> <td><input type="text" ng-model="tel" placeholder="请输入联系方式"/></td> </tr> <tr align="center"> <td colspan="2"><button ng-click="register()"> 注册 </button></td> </tr> </tbody> </table> </center></body></html>
4. game.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>游戏页面</title></head><body> <center> <p style="color: purple;font-size: 56px;line-height: 475px;">Let's play a game</p> </center></body></html>
5. mine.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>个人中心页面</title></head><body> <center> <p style="color:yellow;font-size: 56px;line-height: 475px;">欢迎来到我的世界</p> </center></body></html>
6. setting.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>设置页面</title></head><body> <center> <p style="color: red;font-size: 56px;line-height: 475px;">Setting</p> </center></body></html>
阅读全文
0 0
- 使用 AngularJS+Route路由+jQuery非空验证 切换不同按钮显示不同html页面功能
- HTML route点击不同按钮,显示不同内容,可以改变按钮背景颜色
- iOS 两个按钮切换显示不同状态和页面
- 页面中多组切换按钮— 事件不同
- html几个不同功能的按钮
- Gtk+实现非规则按钮的不同状态图片切换
- Gtk+实现非规则按钮的不同状态图片切换
- Button按钮实现按下不同状态切换功能
- Jquery 切换不同图片
- 同一按钮按钮不同功能
- route命令显示的路由表里面不同标志的含义
- jquery 验证非空
- jQuery非空验证
- AngularJS使用路由切换视图
- 浏览器不同语言切换不同页面
- 1. AngularJS+路由+JQuery：模糊查询过滤内容，下拉菜单排序，过滤敏感字符，验证判断后添加表格信息（路由显示添加页面）
- 按钮不同状态显示不同图片
- angularJs-route路由详解
- GYM CERC 16 K Key Knocking 构造
- 理解PostMessage
- 获取前一页存储数据的id
- 搭建本地git到服务器
- Servlet(二)
- 使用 AngularJS+Route路由+jQuery非空验证 切换不同按钮显示不同html页面功能
- spring boot 实战小试
- 导弹拦截（动态规划）
- L8 文件和目录权限chmod，更改所有者和所属组chown，umask，隐藏权限lsattr/chattr
- 最长公共子序列（LCS） c语言/c++
- 微信开发技术总结
- C++——【USACO 5.1.2】——Starry Night
- redis-持久化
- css-3(行元素 块元素 流 盒子模型)
