angular实现form验证实例代码

本篇文章主要介绍了angular实现form验证实例代码，具有一定的参考价值，有兴趣的可以了解一下。

先上效果页面：

其中几个知识点

1、angularJs提供了几个新的type类型：

 type="password" type="email" type="number" type="url"

2、几个参数含义

ng-required //是否必填，true/false

ng-minlength //最小长度，数字

ng-maxlength //最大长度，数字

min //最小数字，数字，仅在type="number"下

max //最小数字，数字，仅在type="number"

3、几个form控制变量，先来一段代码

   用户名

 formName.inputFieldName.$pristine   //字段是否未更改,对应上面的html代码即为 myform.username.$pristine formName.inputFieldName.$dirty   //字段是否更改,对应上面的html代码即为 myform.username.$dirty formName.inputFieldName.$valid   //字段有效,对应上面的html代码即为 myform.username.$valid formName.inputFieldName.$invalid   //字段无效,对应上面的html代码即为 myform.username.$invalid formName.inputFieldName.$error   //字段错误信息，使用频率比较高,对应上面的html代码即为 myform.username.$error

4、下面直接上代码，首先是html代码，使用了bootstrap.css样式，在结尾引入了angular

   form验证    用户名 
用户名必须大于5位
用户名必须小于于10位
 密 码 
密码必须大于10位
 确认密码 
两次密码不一致
 邮 箱 
请输入正确邮箱地址
 年 龄 
请输入正确年龄
 博 客 
请输入正确博客地址
 性 别   男  女
 爱 好  {{hoppy.name}} 
{{data.Ahoppy.join('、')}}
 地 址

下面为js代码（可能其中有些不妥之处，请指正，谢谢）

 (function(window) { 'use strict'; var mymodule = angular.module('formModule', []); // 城市删选器 mymodule.filter('cityfilter',function(){ return function(data,parent){ var cityData=[]; angular.forEach(data, function(item, key){ if(item.parent==parent){ cityData.push(item); } }); return cityData; } }); mymodule.controller('formctrl', ['$scope', function($scope) { // 设定初始状态 $scope.data={ Ahoppy:[1,3] } // 爱好对象 $scope.hoppies = [ {id: 1,name: '玩游戏',checked: istrue(1)}, {id: 2,name: '吃饭',checked: false}, {id: 3,name: '睡觉',checked: false}, {id: 4,name: '玩游戏',checked: true} ]; // 城市 $scope.cities=[ {name:'河南',parent:0,id:1}, {name:'郑州',parent:1,id:2}, {name:'郑东新区',parent:2,id:3}, {name:'金水区',parent:2,id:4}, {name:'二七区',parent:2,id:5}, {name:'信阳',parent:1,id:6}, {name:'商城',parent:6,id:7}, {name:'罗山',parent:6,id:8}, {name:'杭州',parent:0,id:9}, {name:'西湖区',parent:9,id:10}, {name:'余杭区',parent:9,id:11}, {name:'萧山区',parent:9,id:12}, {name:'上城区',parent:9,id:13}, ]; // 判断是否是选中状态 function istrue(id){ for(var i=0;i<$scope.data.Ahoppy.length;i++){ if($scope.data.Ahoppy[i]===id){ return true; } } return false; }; // 获取选中的爱好 $scope.togglehoppy = function() { $scope.data.Ahoppy = []; angular.forEach($scope.hoppies, function(item, key) { if (item.checked == true) { $scope.data.Ahoppy.push(item.id); } }); } }]) })(window)

以上就是angular实现form验证实例代码的详细内容，更多请关注易知道|edz.cc其它相关文章！