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

用户名

密 码

确认密码

邮 箱

年 龄

博 客

性 别

男

女

爱 好

{{hoppy.name}}

地 址

下面为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)

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。