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

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. 为什么总是无法访问VMware内的web服务？
			
    除了防火墙的设置,很可能时因为你的Web服务监听的时127.0.0.1地址,构成了本机回环,只能本机访问的原因. 启动服务的时候可以尝试指定hostname为0.0.0.0或者你想监听的IP地址. [ ...
    
			
    2. 
						
  2. 数据解析_bs进行数据解析
			
    1.bs4进行数据解析 数据解析的原理 1.标签定位 2.提取标签,标签属性中存储的数据值 bs4数据解析的原理 1.实例化一个BeautifulSoup对象,并且将页面源码数据加载到该对象中 2.通 ...
    
			
    3. 
						
  3. laravel7使用auth进行用户认证
			
    原文地址:https://www.wjcms.net/archives/laravel7使用auth进行用户认证 laravel7 版本移除了 auth,大家都知道以前版本是直接使用 php arti ...
    
			
    4. 
						
  4. HDFS概述及其优缺点
			
    HDFS产生背景 随着数据量越来越大,在一个操作系统存不下所有的数据,那么就分配到更多的操作系统管理的磁盘中,但是不方便管理和维护,迫切需要一种系统来管理多台机器上的文件,这就是分布式文件管理系统.H ...
    
			
    5. 
						
  5. Scala 基础（十四）：Scala 模式匹配（二）
			
    1 匹配数组 1)Array(0) 匹配只有一个元素且为0的数组. 2)Array(x,y) 匹配数组有两个元素,并将两个元素赋值为x和y.当然可以依次类推Array(x,y,z) 匹配数组有3个元素 ...
    
			
    6. 
						
  6. flask 源码专题（十一）：LocalStack和Local对象实现栈的管理
			
    目录 04 LocalStack和Local对象实现栈的管理 1.源码入口 1. flask源码关于local的实现 2. flask源码关于localstack的实现 3. 总结 04 LocalS ...
    
			
    7. 
						
  7. java 基本语法（三） 运算符
			
    1-算术运算符 1.算术运算符: + - + - * / % (前)++ (后)++ (前)-- (后)-- + [典型代码] //除号:/ int num1 = 12; int num2 = 5;  ...
    
			
    8. 
						
  8. 前端05 /js基础
			
    前端05 /js基础 昨日内容回顾 css选择器的优先级 行内(1000) > id(100) > 类(10) > 标签(1) > 继承(0) 颜色 rgb(255,255,2 ...
    
			
    9. 
						
  9. Python函数05/内置函数/闭包
			
    Python函数05/内置函数/闭包 目录 Python函数05/内置函数/闭包 内容大纲 1.内置函数(二) 2.匿名函数及内置函数(重要) 3.闭包 4.今日总结 5.今日练习 内容大纲 1.内置 ...
    
			
    10. 
						
  10. 微信小程序wx.switchTab跳转到tab页面后onLoad里面的方法不执行
			
    相信大家在做小程序的时候启动页跳转到tab首页会用到switchTab 但是在跳转后发现页面模块不全,后面console.log()后发现是onLoad里面的方法不执行 解决这种问题的方法页有很多中, ...
    
			
    11.