使用 AngularJS+Route路由+jQuery非空验证 切换不同按钮显示不同html页面功能
2017-10-21 16:15
519 查看
效果图：
1. 主代码：
2. main.html
3. register.html
4. game.html
5. mine.html
6. setting.html
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 手机商城第二天，各个功能按钮的切换与显示不同界面
- 做一个计时器示例 在页面上有一个文本框和一个普通按钮 在状态栏上显示，单击按钮，开始计时的提示信息 单击按钮时，在文本框显示计数的过程，同时要求按钮上的字，显示为“单击暂停” 此时单击按钮，暂停计时，同时按钮上的字显示为“继续计时”，要求这两种状态来回切换，来完成计数器的功能
- 在昨天作业的基础上添加 ：删除按钮，修改并保存按钮 和 添加按钮。完成这些按钮所对应的功能/新建页面DataXML,使用GridView显示book.xm中的图书信息
- 在HTML页面中点不同按钮在同一个IFRAME分别切换不同子页面的方法
- 在页面中，我们经常看到，一个button按钮，如果属标点击，就会触发一个窗口的显示，如果二次点击并可以隐藏，那么如何通过JAVA配合html来实现这一功能呢？
- 在Silverlight页面里显示HTML的免费控件下载（附使用方法代码）
- 在Silverlight页面里显示HTML的免费控件下载（附使用方法代码）
- 使用PHP返回需要登录验证的HTML页面
- 回发或回调参数无效。在配置中使用 或在页面中使用 启用了事件验证。出于安全目的，此功能验证回发或回调事件的参数是否来源于最初呈现这些事件的服务器控件。如果数据有效并且是预期的，则使用 ClientScriptManager.RegisterForEvent
- 回发或回调参数无效。在配置中使用 或在页面中使用 启用了事件验证。出于安全目的，此功能验证回发或回调事件的参数是否来源于最初呈现这些事件的服务器控件。如果数据有效并且是预期的，则使用 ClientScriptManager.RegisterForEventValidation 方法来注册回发或回调数据以进行验证。
- 回发或回调参数无效。在配置中使用 或在页面中使用 启用了事件验证。出于安全目的，此功能验证回发或回调事件的参数是否来源于最初呈现这些事件的服务器控件。如果数据有效并且是预期的，则使用 ClientScriptManager.RegisterF
- ASP.NET jQuery 食谱12 (通过使用jQuery validation插件简单实现用户注册页面验证功能)
- ASP.NET jQuery 食谱11 (通过使用jQuery validation插件简单实现用户登录页面验证功能)
- 使用Qt通过cgi导入文件并显示在页面上并做类似Action功能的跳转
- ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
- 回发或回调参数无效。在配置中使用 或在页面中使用 启用了事件验证。出于安全目的，此功能验证回发或回调事件的参数是否来源于最初呈现这些事件的服务器控件。如果数据有效并且是预期的，则使用 ClientSc
- 回发或回调参数无效。在配置中使用 或在页面中使用 启用了事件验证。出于安全目的，此功能验证回发或回调事件的参数是否来源于最初呈现这些事件的服务器控件。如果数据有效并且是预期的，则使用 ClientScriptManager.RegisterForEventValidation 方法来注册回发或回调数据以进行验证。
- 使用Form验证，未登录时登录页面无法显示图片、css、js文件的解决方法
- 写一个HTML页面，实现以下功能，左键点击页面时显示“您好”，右键点击时显示“禁止右键”。并在2秒钟后自动关闭页面
- Asp.net 打开页面错误 (无法显示 XML 页。使用 XSL 样式表无法查看 XML 输入。请更正错误然后单击 刷新按钮，或以后重试。)