UDN-企业互联网技术人气社区

板块导航

浏览  : 818
回复  : 6

[AngularJS] angular实现form验证

[复制链接]
芭芭拉的头像 楼主
发表于 2017-2-8 14:49:28 | 显示全部楼层 |阅读模式
  先上效果页面:https://lpdong.github.io/myForm-1/

  其中几个知识点

  1、angularJs提供了几个新的type类型:
  1. type="password"

  2. type="email"

  3. type="number"

  4. type="url"
复制代码

  2、几个参数含义
  1. ng-required      //是否必填,true/false

  2. ng-minlength     //最小长度,数字

  3. ng-maxlength     //最大长度,数字

  4. min              //最小数字,数字,仅在type="number"下

  5. max              //最小数字,数字,仅在type="number"
复制代码

  3、几个form控制变量,先来一段代码
  1. <form role="form" name="myform" >
  2.   <div class="form-group" >
  3.     <label class="col-sm-2">用户名</label>
  4.     <div class="col-sm-8">
  5.           <input type="text" name="username" class="form-control" placeholder="请输入用户名"></div>
  6.   </div>
  7. </form>
  8. formName.inputFieldName.$pristine         //字段是否未更改,对应上面的html代码即为 myform.username.$pristine

  9. formName.inputFieldName.$dirty            //字段是否更改,对应上面的html代码即为 myform.username.$dirty

  10. formName.inputFieldName.$valid            //字段有效,对应上面的html代码即为 myform.username.$valid

  11. formName.inputFieldName.$invalid          //字段无效,对应上面的html代码即为 myform.username.$invalid

  12. formName.inputFieldName.$error            //字段错误信息,使用频率比较高,对应上面的html代码即为 myform.username.$error
复制代码

  4、下面直接上代码,首先是html代码,使用了bootstrap.css样式,在结尾引入了angular
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>form验证</title>
  5.     <link rel="stylesheet" type="text/css" href="style/bootstrap.css">
  6. </head>
  7. <body ng-app="formModule">
  8. <div style="margin-top: 60px;">
  9.     <form role="form" name="myform" class="form-horizontal container" ng-controller="formctrl">
  10.     <!-- 用户名 -->
  11.   <div class="form-group" ng-class="{'has-error':myform.username.$dirty && myform.username.$invalid}">
  12.     <label class="col-sm-2">用户名</label>
  13.     <div class="col-sm-8">
  14.           <input type="text" name="username" ng-minlength="5" ng-maxlength="10" ng-required="true" ng-model="data.username" class="form-control" placeholder="请输入用户名"></div>
  15.     <div class="col-sm-2 text-danger" ng-show="myform.username.$error.minlength">用户名必须大于5位</div>
  16.     <div class="col-sm-2" ng-show="myform.username.$error.maxlength">用户名必须小于于10位</div>
  17.   </div>
  18. <!-- 密码 -->
  19. <div class="form-group" ng-class="{'has-error':myform.password.$dirty&&myform.password.$invalid}">
  20.     <label class="col-sm-2">密 码</label>
  21.     <div class="col-sm-8">
  22.           <input type="password" name="password" ng-minlength="10" ng-required="true" ng-model="data.password" class="form-control" placeholder="请输入密码"></div>
  23.     <div class="col-sm-2 text-danger" ng-show="myform.password.$error.minlength">密码必须大于10位</div>
  24.   </div>

  25.   <!-- 确认密码 -->
  26.   <div class="form-group" ng-class="{'has-error':myform.passwordconfirm.$dirty&&myform.passwordconfirm.$invalid}">
  27.     <label class="col-sm-2">确认密码</label>
  28.     <div class="col-sm-8">
  29.           <input type="password" name="passwordconfirm" ng-required="true" ng-model="data.passwordconfirm" class="form-control" placeholder="请输入确认密码"></div>
  30.     <div class="col-sm-2 text-danger" ng-show="data.passwordconfirm!=data.password&&myform.password.$dirty&&myform.passwordconfirm.$dirty">两次密码不一致</div>
  31.   </div>
  32.   <!-- 邮箱 -->
  33.   <div class="form-group" ng-class="{'has-error':myform.email.$dirty&&myform.email.$invalid}">
  34.     <label class="col-sm-2">邮 箱</label>
  35.     <div class="col-sm-8">
  36.           <input type="email" name="email" ng-required="true" ng-model="data.email" class="form-control" placeholder="请输入邮箱地址"></div>
  37.     <div class="col-sm-2 text-danger" ng-show="myform.email.$error.email">请输入正确邮箱地址</div>
  38.   </div>
  39.   <!-- 博客 -->
  40.   <div class="form-group" ng-class="{'has-error':myform.age.$dirty&&myform.age.$invalid}">
  41.     <label class="col-sm-2">年 龄</label>
  42.     <div class="col-sm-8">
  43.           <input type="number" name="age" ng-required="true" min="10" max="99" ng-model="data.age" class="form-control" placeholder="请输入您的年龄"></div>
  44.     <div class="col-sm-2 text-danger" ng-show="myform.age.$error.min&&myform.age$error.max">请输入正确年龄</div>
  45.   </div>
  46.   <!-- 年龄 -->
  47.   <div class="form-group" ng-class="{'has-error':myform.blog.$dirty&&myform.blog.$invalid}">
  48.     <label class="col-sm-2">博 客</label>
  49.     <div class="col-sm-8">
  50.           <input type="url" name="blog" ng-required="true" ng-model="data.blog" class="form-control" placeholder="请输入博客地址"></div>
  51.     <div class="col-sm-2 text-danger" ng-show="myform.blog.$error.url">请输入正确博客地址</div>
  52.   </div>
  53.   <!-- 性别 -->
  54.   <div class="form-group">
  55.   <label class="col-sm-2">性 别</label>
  56.   <div class="col-sm-8">
  57.       <label class="radio-inline">
  58.           <input type="radio" value="1" ng-model="data.sex" name="sex"> 男</label>
  59.     <label class="radio-inline">
  60.           <input type="radio" value="2" ng-model="data.sex" name="sex"> 女</label>
  61.   </div>
  62.   </div>
  63.   <!-- 爱好 -->
  64.   <div class="form-group">
  65.   <label class="col-sm-2">爱 好</label>
  66.   <div class="col-sm-8">
  67.   <label ng-repeat="hoppy in hoppies" class="checkbox-inline">
  68.       <input type="checkbox" name="hoppy[]" ng-click="togglehoppy()" ng-model="hoppy.checked" >{{hoppy.name}}
  69.   </label>
  70.   </div>
  71.   <div class="col-sm-2">{{data.Ahoppy.join('、')}}</div>
  72.   </div>

  73.   <!-- 地址 -->
  74.   <div class="form-group">
  75.       <label class="col-sm-2">地 址</label>
  76.       <div class="col-sm-3">
  77.           <select class="form-control" ng-model="data.provinec" ng-options="x.id as x.name for x in cities | cityfilter:0"></select>
  78.       </div>
  79.       <div class="col-sm-3">
  80.           <select class="form-control" ng-show="data.provinec" ng-model="data.area" ng-options="x.id as x.name for x in cities | cityfilter:data.provinec"></select>
  81.       </div>
  82.       <div class="col-sm-3">
  83.           <select class="form-control" ng-show="data.area" ng-model="data.city" ng-options="x.id as x.name for x in cities | cityfilter:data.area"></select>
  84.       </div>
  85.   </div>
  86.   </form>
  87. </div>

  88. <script src="js/angular.js"></script>
  89. <script src="js/app.js"></script>
  90. </body>
  91. </html>
复制代码

  下面为js代码
  1. (function(window) {
  2.     'use strict';
  3.     var mymodule = angular.module('formModule', []);
  4.     // 城市删选器
  5.     mymodule.filter('cityfilter',function(){
  6.         return function(data,parent){
  7.             var cityData=[];
  8.             angular.forEach(data, function(item, key){
  9.                 if(item.parent==parent){
  10.                     cityData.push(item);
  11.                 }
  12.             });
  13.             return cityData;
  14.         }
  15.     });
  16.     mymodule.controller('formctrl', ['$scope', function($scope) {
  17.         // 设定初始状态
  18.         $scope.data={
  19.             Ahoppy:[1,3]
  20.         }
  21.         // 爱好对象
  22.         $scope.hoppies = [
  23.         {id: 1,name: '玩游戏',checked: istrue(1)},
  24.         {id: 2,name: '吃饭',checked: false},
  25.         {id: 3,name: '睡觉',checked: false},
  26.         {id: 4,name: '玩游戏',checked: true}
  27.         ];
  28.         // 城市
  29.         $scope.cities=[
  30.             {name:'河南',parent:0,id:1},
  31.             {name:'郑州',parent:1,id:2},
  32.             {name:'郑东新区',parent:2,id:3},
  33.             {name:'金水区',parent:2,id:4},
  34.             {name:'二七区',parent:2,id:5},
  35.             {name:'信阳',parent:1,id:6},
  36.             {name:'商城',parent:6,id:7},
  37.             {name:'罗山',parent:6,id:8},
  38.             {name:'杭州',parent:0,id:9},
  39.             {name:'西湖区',parent:9,id:10},
  40.             {name:'余杭区',parent:9,id:11},
  41.             {name:'萧山区',parent:9,id:12},
  42.             {name:'上城区',parent:9,id:13},
  43.         ];
  44.         
  45.         // 判断是否是选中状态
  46.         function istrue(id){
  47.             for(var i=0;i<$scope.data.Ahoppy.length;i++){
  48.                 if($scope.data.Ahoppy[i]===id){
  49.                     return true;
  50.                 }
  51.             }
  52.             return false;
  53.         };
  54.         // 获取选中的爱好

  55.         $scope.togglehoppy = function() {
  56.             $scope.data.Ahoppy = [];
  57.             angular.forEach($scope.hoppies, function(item, key) {
  58.                 if (item.checked == true) {
  59.                     $scope.data.Ahoppy.push(item.id);
  60.                 }
  61.             });
  62.         }

  63.     }])
  64. })(window)
复制代码

相关帖子

发表于 2017-2-8 14:50:18 | 显示全部楼层
前排支持下
使用道具 举报

回复

发表于 2017-2-19 10:09:04 | 显示全部楼层
JavaScript依赖于浏览器本身,与操作环境无关,只要计算机能运行浏览器,并支持JavaScript的浏览器,就可正确执行,从而实现了“编写一次,走遍天下”的梦想。
使用道具 举报

回复

发表于 2017-7-3 13:19:59 | 显示全部楼层
angular , react , vue  着三个,到底学那个好呢? 纠结
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部