常用的表单验证指令 （基本概念）

1. 必填项验证

某个表单输入是否已填写，只要在输入字段元素上添加HTML5标记required即可：

<input type="text" required />  

2. 最小长度

验证表单输入的文本长度是否大于某个最小值，在输入字段上使用指令ng-minleng= "{number}"：

<input type="text" ng-minlength="5" />

3. 最大长度

验证表单输入的文本长度是否小于或等于某个最大值，在输入字段上使用指令ng-maxlength="{number}"：

<input type="text" ng-maxlength="20" />

4. 模式匹配

使用ng-pattern="/PATTERN/"来确保输入能够匹配指定的正则表达式：

<input type="text" ng-pattern="/[a-zA-Z]/" />

5. 电子邮件

验证输入内容是否是电子邮件，只要像下面这样将input的类型设置为email即可：

<input type="email" name="email" ng-model="user.email" />

6. 数字

验证输入内容是否是数字，将input的类型设置为number：

<input type="number" name="age" ng-model="user.age" />

7. URL

验证输入内容是否是URL，将input的类型设置为 url：

<input type="url" name="homepage" ng-model="user.facebook_url" />

我们使用了 ng-show指令， color:red 在邮件是 $dirty 或 $invalid 才显示:

属性 描述
$dirty 表单有填写记录
$valid 字段内容合法的
$invalid 字段内容是非法的
$pristine 表单没有填写记录

示例（以邮箱为例+正则表达式 引入angular+bootstrap）

ng正则表达式写法：

ng-pattern=" /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/"  //邮箱验证




<body  ng-Controller="MyController">  //ng-app标在html标签上

<div class="col-md-6">

  <form role="form" name="myForm" ng-submit="submitForm(myForm.$valid)" class="form-horizontal" novalidate>

    <div class="form-group  has-feedback">

      <div class="col-md-4">

        <label for="email"> 电子邮件</label>

      </div>

      <div class="col-md-6">

        <input type="email" id="email" name="email" ng-minlength="5" ng-maxlength="30" ng-pattern=" /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/" ng-model="user.email" required class="form-control" />

        <span class="glyphicon glyphicon-ok form-control-feedback"

              ng-show="myForm.email.$dirty && myForm.email.$valid"></span>

      </div>

      <div class="col-md-2">

        <span style="color:red" class=""

              ng-show="myForm.email.$dirty && myForm.email.$invalid">邮箱格式错误!</span>

      </div>

    </div>

     <div class="form-group  text-center">

      <input class="btn btn-primary btn-lg" ng-disabled="myForm.$invalid" type="submit" value="提交" />

    </div>

  </form>

</div>

<script>

  angular.module('myTest', [])

          .controller('MyController', function($scope) {

                    $scope.submitForm = function(isValid) {

                      if (!isValid) {

                        alert('验证失败');

                      }

                    };

                  }

          );

</script>

</body>






也可以更详尽的支出单个错误：




<div ng-show="myForm.email.$dirty && myForm.email.$error.maxlength" class="alert alert-danger help-block">

          邮箱长度不能超过30位

</div>

<div ng-show="myForm.email.$dirty && myForm.email.$error.minlength" class="alert alert-danger help-block">

          邮箱长度不能小于5位

</div>

<div ng-show="myForm.email.$dirty && myForm.email.$error.email" class="alert alert-danger help-block">

          邮箱格式不正确

</div>




　　
												


											
彻底弄懂angularJS表单验证的更多相关文章
	

    
								
  1. angularjs表单验证checkbox
		
    angularjs中默认有表单验证的支持,见文末的refer 我想要验证至少要选择一个checkbox,否则就不能提交 但是checkbox貌似没有简单的方法,想来想去给出下面的解决方案 valida ...
    
		
    2. 
						
  2. 【AngularJS学习笔记】AngularJS表单验证
		
    AngularJS表单验证 AngularJS提供了一些自带的验证属性 1.novalidate:添加到HTML的表单属性中,用于禁用浏览器默认的验证. 2.$dirty   表单有填写记录 3.$v ...
    
		
    3. 
						
  3. AngularJS表单验证实现方法详解
		
    本文主要是通过源码实例和大家分享AngularJS中的表单验证相关知识,希望通过本文的分享,对大家学习AngularJS有所帮助. 1.常规表单验证: 2.AngularJs中提供的表单验证实例. 实 ...
    
		
    4. 
						
  4. AngularJs表单验证
		
    常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" requir ...
    
		
    5. 
						
  5. [Angularjs]表单验证
		
    写在前面 在开发中提交表单,并对表单的值进行验证是非常常见的操作,angularjs对表单验证提供了非常好的支持. demo 表单 <form name="myform" n ...
    
		
    6. 
						
  6. AngularJS表单验证,手动验证或自动验证
		
    AngularJS的表单验证大致有两种,一种是手动验证,一种是自动验证. 手动验证 所谓手动验证是通过AngularJS表单的属性来验证.而成为AngularJS表单必须满足两个条件:1.给form元 ...
    
		
    7. 
						
  7. AngularJS 表单验证小结
		
    注:本文所述的表单验证即AngularJS自带的表单验证,无需引入第三方的插件 一.常用的验证特性标签 1.非空 为input加入一个required属性即可,例如: <input type=& ...
    
		
    8. 
						
  8. angularjs 表单验证（不完整版）
		
    针对项目实践表单验证总结: angular 的 form表单验证:form内需要novalidate取消默认验证,用ng自己的验证,form的名字是非常必要的 栗子:以注册为栗子,下面是注册的部分:  ...
    
		
    9. 
						
  9. AngularJS表单验证开发案例
		
    angular支持IE8+浏览器,虽然性能很好,但是目前只适用于手机端项目 知识点:域$scopeAngularJS基础指令指令实现不同的功能学习思路和方法 <link rel="st ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. TypeScript学习——数组、元组、接口(2)
			
    数组 数组类型注解 const numberArr: (number | string)[] = [1, '2', 3]; //既可以是number 也可以是string const stringAr ...
    
			
    2. 
						
  2. Install fail! Error: EBUSY: resource busy or locked, rename
			
    https://stackoverflow.com/questions/36566236/npm-install-error-code-ebusy-errono-4082 关闭项目所在的文件夹,cmd ...
    
			
    3. 
						
  3. vs2013, EF6.0.0.0 使用Migrations来更新数据库时报错
			
    1.vs中,程序包管理器控制台 2.执行,Enable-Migrations 报错: Migrations have already been enabled in project 'dd'. To  ...
    
			
    4. 
						
  4. Azure Data Box
			
    一,引言 最近博主又要面临考试了,随笔又再次缓慢更新,说起考试,之前在微软的 ms learn的课程上有接触到一个叫 Azure Data Box的,刚好今天也花了一个多小时看了一下相关文档,下面就正 ...
    
			
    5. 
						
  5. 面试WEB前端如何才能通过？
			
    从事web前端工作七年时间,因为一直是非常热爱编程的,从小就有兴趣,大学就是学计算机的,技术应该比一般同龄的都要好一些,今天我想给大家讲述一下,目前想要做web前端开发,面试成功应该如何去学习,要具备 ...
    
			
    6. 
						
  6. Java实现 第十一届蓝桥杯——超级胶水（渴望有题目的大佬能给小编提供一下题目，讨论群：99979568）
			
    PS: 好久没写过算法题了,总感觉自己写的思路没问题,但是结果就是不对,希望哪位大佬有时间能给找找问题 超级胶水 小明有n颗石子,按顺序摆成一排,他准备用胶水将这些石子黏在一起. 梅克什字有自己的重量 ...
    
			
    7. 
						
  7. Instrction Arrangement UDH 4109 拓扑排序 or 最长路
			
    题目描述 Ali has taken the Computer Organization and Architecture course this term. He learned that ther ...
    
			
    8. 
						
  8. When Lambo with Howdoo
			
    原文链接:https://howdoo.io/when-lambo/ 为了庆祝即将推出的革命性新社交媒体平台Howdoo以及我们令人惊喜的合作伙伴关系和社区,我们正在发起一项竞赛,以最终回答“When ...
    
			
    9. 
						
  9. .net core 服务注册生命周期
			
    在Asp.Net core中的IServiceCollection容器中注册服务的生命周期分以下3种: 1.Transient 通过AddTransient注册,会在IServiceCollectio ...
    
			
    10. 
						
  10. MYSQL 之 JDBC（十四）：批量处理JDBC语句提高处理效率
			
    1.当需要成批插入或者更新记录时.可以采用java的批量更新机制,这一机制允许多条语句一次性提交给数据库批量处理.通常情况下比单独提交处理更有效率. 2.JDBC的批量处理语句包括下面两个方法: ad ...
    
			
    11.