我们专注攀枝花网站设计 攀枝花网站制作 攀枝花网站建设
成都网站建设公司服务热线:400-028-6601

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

angular如何实现form验证

这篇文章主要为大家展示了“angular如何实现form验证”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“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验证”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


标题名称:angular如何实现form验证
文章地址:http://shouzuofang.com/article/gdoeio.html