文章标题 AngularJs表单验证
来源：互联网 发布：冷艳锯 知乎 编辑：程序博客网 时间：2024/06/05 07:14
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>用户信息的增删改查：非空验证添加，模糊查询，修改密码，批量和全部删除</title> <style type="text/css"> .addUser{ font-size: 18px; background-color: #0c60ee; } </style> <!-- 导入AngularJS+路由ngRoute 库文件--> <script src="angular.js"></script> <script src="angular-route.js"></script> <script> var app = angular.module("myApp",['ngRoute']); // 0 .使用config配置路由规则 app.config(["$routeProvider",function ($routeProvider) { $routeProvider .when("/addUser",{ //添加用户 路由地址 controller:"addUserCtrl", templateUrl:"addUser.html" }) .when("/updatePwd/:name",{ //修改密码 路由地址 controller:"updatePwdCtrl", templateUrl:"updatePwd.html" }) .otherwise({redirectTo:"/addUser"}); }]); // 1. 主控制器 app.controller("myCtrl",function ($scope,$location) { $scope.users = [ { "id": 1, "name":"张三", "pwd":"123", "age":22, "sex":"男", "state":false }, { "id": 2, "name":"李四", "pwd":"456", "age":33, "sex":"女", "state":false }, { "id": 3, "name":"王五", "pwd":"789", "age":44, "sex":"男", "state":false } ]; //定义页面跳转方法：给按钮添加点击事件，根据传过来的参数，判断跳转到的路由地址 $scope.goToUrl = function (path) { $location.path(path); } //点击全部删除按钮的点击事件 $scope.del = function () { if(confirm("确定全部删除吗？")){ $scope.users = []; } } //点击批量删除按钮的函数：用户没有选中任意复选框时点击批量删除按钮提示用户先进行选中要删除的商品信息 $scope.deleteSel = function () { var userNames = []; //定义空数组，保存选中项的name //根据下标遍历数据源，把选中项的名字添加到数组中。 for (index in $scope.users) { //判断选项是否为选中的的状态？ if($scope.users[index].state == true){ userNames.push($scope.users[index].name); } } //遍历含有选中项name属性的数组。有多少个被选中，数据源就会被遍历多少遍。 if(userNames.length > 0){ if (confirm("是否删除选中项？")){ for(i in userNames){ var name = userNames[i]; //对比选中项的名字在数组中的角标，根据角标删除当前对象，删一个数据源少一个。 for(i2 in $scope.users){ if($scope.users[i2].name == name){ $scope.users.splice(i2,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.ageTest = 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.sexTest = function (sex,sexSize) { if(sexSize == "---请选择---"){ return true; }else { if(sex == sexSize){ return true; }else { return false; } } } }); // 2 .定义添加用户界面控制器 app.controller("addUserCtrl",function ($scope) { $scope.name = ""; $scope.pwd1 = ""; $scope.pwd2 = ""; $scope.age = ""; $scope.sex = ""; $scope.state = false; //点击添加用户信息的按钮,验证非空情况后，再添加 $scope.sub = function () { $scope.flag1 = false; $scope.flag2 = false; $scope.flag3 = false; $scope.flag4 = false; $scope.flag5 = false; $scope.flag6 = false; //a)用户名非空 if ($scope.name == null || $scope.name == ""){ alert("用户名不得为空！"); }else { $scope.flag1 = true; } //b)密码长度 if ($scope.pwd1 == null || $scope.pwd1 == ""){ alert("密码不能为空！"); }else if($scope.pwd1.length < 6){ alert("密码长度不能小于6位！"); }else { $scope.flag2 = true; } //确认密码 if ($scope.pwd2 == null || $scope.pwd2 == ""){ alert("确认密码不能为空！"); }else if($scope.pwd2 != $scope.pwd1 ){ alert("两次密码输入不一致！"); }else { $scope.flag3 = true; } //c)年龄在10到60之间 if ($scope.age == "" || $scope.age == null){ alert("年龄不能为空！"); }else if ($scope.age < 10 || $scope.age > 60){ alert("年龄必须在10到60之间！"); }else { $scope.flag4 = true; } //判断年龄是否包含字母（汉字） //定义正则表达式 var reg = /\D/; if(reg.test($scope.age)) { alert("年龄不能含字母！"); }else { $scope.flag5 = true; } if ($scope.sex == null || $scope.sex == ""){ alert("性别不得为空！"); }else if($scope.sex != "男" && $scope.sex != "女"){ alert("请正确填写性别！"); }else { $scope.flag6 = true; } if($scope.flag1 == true && $scope.flag2 == true && $scope.flag3 == true && $scope.flag4 == true && $scope.flag5 == true && $scope.flag6 == true){ alert("注册成功！"); //注册成功后清空信息 var inputs = document.getElementsByTagName("input"); for(i=0;i<inputs.length;i++){ inputs.item(i).value = ""; } var newUser = { id:$scope.users.length + 1, name:$scope.name, pwd:$scope.pwd1, age:$scope.age, sex:$scope.sex, state:$scope.state } //添加新用户 $scope.users.push(newUser); }else { return false; } } }); // 3. 定义修改用户控制器:传入路由参数 app.controller("updatePwdCtrl",function ($scope,$routeParams) { var name = $routeParams.name; //获得要修改的用户的用户名 $scope.name = name; //将要修改用户的名字，赋值给双向数据绑定的页面用户名显示。 $scope.oldPwd = ""; //原来的旧密码 $scope.newOldPwd = ""; //现在重新的旧密码 $scope.pwd1 = ""; //双向数据绑定用户输入的新密码 $scope.pwd2 = ""; //用户输入的第二次 确认密码 //点击修改密码按钮，执行修改密码方法 $scope.updatePwd = function () { //遍历数据源，拿到当前这个要修改密码的用户,,,取出他的原来的旧密码 for (var i = 0;i<$scope.users.length;i++){ if($scope.name == $scope.users[i].name){ $scope.oldPwd = $scope.users[i].pwd; } } var flag = true ; //判断现在重新的旧密码 if($scope.newOldPwd == "" || $scope.newOldPwd == null){ alert("旧密码不能为空！"); flag = false; }else{ //判断原来的旧密码是否和现在输入的旧密码是否一样 if($scope.oldPwd == $scope.newOldPwd){ }else { alert("旧密码输入错误！"); flag = false; } } //判断新密码 if($scope.pwd1 == "" || $scope.pwd1 == null){ alert("新密码不能为空！"); flag = false; } //判断 确认密码 if($scope.pwd2 == "" || $scope.pwd2 == null){ alert("确认密码不能为空！"); flag = false; }else{ if($scope.pwd2 == $scope.pwd1){ }else { alert("确认密码输入错误！"); flag = false; } } if(flag){ //遍历数据源，通过比较数据源中用户名跟参数要修改的用户名一致，进行密码修改 for(index in $scope.users){ if($scope.users[index].name == name){ //获得用户输入的新密码，赋值给当前用户要修改的密码。 $scope.users[index].pwd = $scope.pwd1; } } } } }); </script></head><body ng-app="myApp" ng-controller="myCtrl"><center> <h2>用户信息表</h2> <!-- 1. 用户信息操作界面 --> <div> <input ng-model="search" placeholder="用户名查询" size="10"/> <!--绑定年龄数据，进行查询--> 年龄：<select id="age" 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="del()">全部删除</button> <button ng-click="deleteSel()">批量删除</button> </div> <br/> <div> <table border="1" cellspacing="0" cellpadding="18"> <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> </tr> </thead> <tbody align="center"> <!-- 用ng-repaet指令将对象遍历并渲染到页面中 --> <!-- filter指令实现模糊查询name的功能。用户在输入框中键入信息的时候商品列表会动态显示符合要求的查询信息 --> <tr ng-repeat="user in users | filter:{'name':search}" ng-if="ageTest(user.age,ageSize)" ng-show="sexTest(user.sex,sexSize)"> <th><input ng-click="checkSelect($index)" ng-model="user.state" type="checkbox"/></th> <td>{{user.id}}</td> <td>{{user.name}}</td> <td>{{user.pwd}}</td> <td>{{user.age}}</td> <td>{{user.sex}}</td> <td><button ng-click="goToUrl('/updatePwd/'+user.name)">修改密码</button> </td> </tr> </tbody> </table> </div> <br/> <button class="addUser" ng-click="goToUrl('/addUser')">添加用户</button> <br/><br/> <!-- 2.添加用户页面 --> <script type="text/ng-template" id="addUser.html"> <form action="#"> <table border="1" cellspacing="0" cellpadding="18"> <tr> <th>用户名：</th> <td><input ng-model="name" placeholder="请输入用户名"/></td> </tr> <tr> <th>密码：</th> <td><input ng-model="pwd1" placeholder="请输入密码"/></td> </tr> <tr> <th>确认密码：</th> <td><input ng-model="pwd2" placeholder="请确认密码"/></td> </tr> <tr> <th>年龄：</th> <td><input ng-model="age" placeholder="请输入年龄"/></td> </tr> <tr> <th>性别：</th> <td><input ng-model="sex" placeholder="请输入性别"/></td> </tr> <tr align="center"> <td colspan="2"><button ng-click="sub()">提交</button></td> </tr> </table> </form> </script> <!-- 3.修改用户信息页面 --> <script type="text/ng-template" id="updatePwd.html"> <form action="#"> <table border="1" cellspacing="0" cellpadding="18"> <tr> <th>用户名：</th> <td><input disabled="disabled" ng-model="name" placeholder="请输入用户名"/></td> </tr> <tr> <th>旧密码：</th> <td><input ng-model="newOldPwd" placeholder="请输入旧密码"/></td> </tr> <tr> <th>新密码：</th> <td><input ng-model="pwd1" placeholder="请输入新密码"/></td> </tr> <tr> <th>确认密码：</th> <td><input ng-model="pwd2" placeholder="请确认密码"/></td> </tr> <tr align="center"> <td colspan="2"><input type="button" ng-click="updatePwd()" value="提交"/></td> </tr> </table> </form> </script> <!-- 4. 显示指定内容 --> <div ng-view> </div></center></body></html>阅读全文
0 0
- 文章标题 AngularJs表单验证
- 文章标题AngularJS学习
- angularJs -- 简单表单验证
- 表单验证<AngularJs>
- AngularJS表单验证
- AngularJs表单验证
- AngularJS 的表单验证
- AngularJS 的表单验证
- AngularJS 表单验证
- 表单验证<AngularJs>
- angularjs自定义表单验证
- Angularjs表单验证demo
- Angularjs自定义表单验证
- 表单验证<AngularJs>
- AngularJS表单验证
- 表单验证<AngularJs>
- angularjs 表单验证
- angularjs表单验证
- C++ static
- 股票量化分析（12）——第三个策略（kdj策略）
- 腾讯2016研发工程师编程题(一)----[编程题] 生成格雷码
- Redis 数据库架构
- FastDFS详细安装步骤,测试;Nginx中配置FastDFS,并提供优化,下载方法,楼主已测
- 文章标题 AngularJs表单验证
- Bellman-Ford算法的实现
- 软件推荐
- Spark SQL Catalyst深入理解
- LeetCode-114. Flatten Binary Tree to Linked List
- display:table的用法
- 股票利益最大化
- Github综合
- 大话设计模式----工厂模式
