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

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. Cannot use 'in' operator to search for '23' in
			
    在用$.each(data,function(){i,n})时,有时会报错 Cannot use 'in' operator to search for '23' in,
    
			
    2. 
						
  2. BZOJ 2200 道路与航线（图论）
			
    BZOJ 2200 道路与航线 题目大意 有两种路,一种没负数,一种没环,求单源最短路. solution 存在负边权Dij一定不能用嘛,显然不是 根据题意能看出来是tarjan,将双向边缩点,得到的 ...
    
			
    3. 
						
  3. Least Cost Bracket Sequence，题解
			
    题目链接 题意: 给你一个含有(,),?的序列,每个?变成(或)有一定的花费,问变成课匹配的括号的最小花费. 分析: 首先如果能变成匹配的,那么就有右括号的个数始终不多于左括号且左右括号数量相等,那就 ...
    
			
    4. 
						
  4. 你是如何理解Vue的响应式系统的
			
    1.响应式系统简述: 任何一个 Vue Component 都有一个与之对应的 Watcher 实例. Vue 的 data 上的属性会被添加 getter 和 setter 属性. 当 Vue Co ...
    
			
    5. 
						
  5. JavaScript学习 Ⅶ
			
    十四. DOM(文档对象模型) 节点:Node--构成HTML文档最基本的单元 文档节点:整个HTML文档 元素节点:HTMl文档中的HTML标签 属性节点:元素的属性 文本节点:HTML标签中的文本 ...
    
			
    6. 
						
  6. requests接口自动化9-共享session和传递cookie
			
    前言: session:用requests.session()创建会话,可以将会话信息传递给其他接口 cookie:用RequestsCookieJar或者cookie字典传递cookie信息 fil ...
    
			
    7. 
						
  7. 05 drf源码剖析之认证
			
    05 drf源码剖析之认证 目录 05 drf源码剖析之认证 1. 认证简述 2. 认证的使用 3. 源码剖析 4. 总结 1. 认证简述 当我们通过Web浏览器与API进行交互时,我们可以登录,然后 ...
    
			
    8. 
						
  8. typeError:The value of a feed cannot be a tf.Tensor object.Acceptable feed values include Python scalars,strings,lists.numpy ndarrays,or TensorHandles.For reference.the tensor object was Tensor...
			
    如上贴出了:错误信息和错误代码. 这个问题困扰了自己两天,报错大概是说输入的数据和接受的格式不一样,不能作为tensor. 后来问了大神,原因出在tf.reshape(),因为网络训练时用placeh ...
    
			
    9. 
						
  9. SQL中的多表联查（SELECT DISTINCT 语句）
			
    前言:(在表中,可能会包含重复值.这并不成问题,不过,有时你也许希望仅仅列出不同(distinct)的值. 关键词 DISTINCT 用于返回唯一不同的值.) 如果不加DISTINCT 的话,主表本来 ...
    
			
    10. 
						
  10. void operator()()的功能
			
    在学习多线程的时候看到这样的一段代码,为什么要重载()呢?真有这个必要吗? #include <iostream> #include <thread> class Counte ...
    
			
    11.