这篇文章主要为大家展示了“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验证
下面为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验证”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!