angular中的表单验证很强大，

一共有5中验证信息，$valid,$invalid,$pristine,$dirty,$error.

$valid-----当验证通过的时候，为true,不通过的时候为false

$invalid----当验证不通过的时候，为true，通过的时候为true

$pristine---当值为初始值的时候，为true，一旦有过改动即为false

$dirty---当值有改动过即为true,其他即为false

$error---包含所有的验证信息，如以下例子，$error = {required:false,minlength:false,pattern:false}。哪条验证不通过，它的值就为true。

以上五个值可以通过表单的name来获取到，参考如下：

<form novalidate name="myForm">
<input type="text" name="myText" ng-model="text" required ng-minlength="5" ng-pattern="/^[a-zA-Z]+$/">
<div>{{ myForm.myText.$valid }}</div>
<div>{{ myForm.myText.$invalid }}</div>
<div>{{ myForm.myText.$pristine }}</div>
<div>{{ myForm.myText.$dirty }}</div>
<div>{{ myForm.myText.$error }}</div>
</form>

可以结合ng-repeat filter $error等来做一些表单验证

  1. <script>
  2. var m1 = angular.module('myApp',[]);
  3. m1.controller('Aaa',['$scope',function($scope){
  4.     $scope.text = 'hello';
  5.     $scope.regText = {
  6.         regT : 'default',
  7.         regList : [
  8.            { name : 'default', text : '请输入用户名' },
  9.            { name : 'required', text : '不能为空' },
  10.            { name : 'pattern', text : '只能为字母' },
  11.            { name : 'pass', text : '√' },
  12.         ],
  13.         change : function(err){
  14.             console.log(err);
  15.             for(var attr in err){
  16.                 if(err[attr]==true){
  17.                     $scope.regText.regT = attr;
  18.                     return;
  19.                 }
  20.             }
  21.             $scope.regText.regT = 'pass';
  22.         }
  23.     };
  24. }]);
  25. </script>
  26. </head>
  27.  
  28. <body>
  29. <div ng-controller="Aaa">
  30.     <form novalidate name="nForm">
  31.         <label>用户名：
  32.             <input type="text" name="nText" ng-model="regText.name" required ng-minlength="5" ng-pattern="/^[a-zA-Z]+$/" ng-blur="regText.change(nForm.nText.$error)">
  33.             <span ng-repeat="re in regText.regList | filter:regText.regT ">{{re.text}}</span>
  34.         </label><br><br>
  35.         <label>密码：
  36.             <input type="password" name="nPas" ng-model="text" required ng-minlength="5" ng-pattern="/^[a-zA-Z]+$/">
  37.             <span>请输入密码</span>
  38.         </label>
  39.     </form>
  40. </div>

　　

angular中的表单验证的更多相关文章

  1. angular学习的一些小笔记(中)之表单验证

    表单验证 我去,我感觉我这个人其实还是一个很傻逼的一个人,老是因为拼错了一个单词或者怎么样就浪费我很长时间,这样真的不行不行,要正确对待这个问题,好了,说正题吧,angular也有表单验证minlen ...

  2. AngularJS中的表单验证

    AngularJS中的表单验证 AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则 ...

  3. angularJS中的表单验证（包括自定义验证）

    表单验证是angularJS一项重要的功能,能保证我们的web应用不会被恶意或错误的输入破坏.Angular表单验证提供了很多表单验证指令,并且能将html5表单验证功能同他自己的验证指令结合起来使用 ...

  4. 关于Django中的表单验证

    ModelForm 和 普通的Form 都可以做表单验证 对于ModelForm如果只是想验证其中一部分model中的field,可以指定:内部类Meta的fields元素: fields = ('x ...

  5. JQuery中的表单验证及相关的内容

      前  言 JRedu Android应用开发中,经常要用到表单.既然用到了表单,那就不可避免的要用到表单的验证.但是,在提交表单时,但是,并不是,每次提交的表单内容都是正确的,如果 每次都将表单的 ...

  6. jq中的表单验证插件------jquery.validate

    今天我们来说一下表单验证,有人说我们在进行表单验证的时候使用正则来验证是非常麻烦的,现在我来给大家介绍一下表单验证的插件:jquery.validate.min.js 它是与jquery一起结合用来使 ...

  7. JS中的表单验证+正则表达式

    表单验证+正则表达式 一.非空验证 trim:去空格(去掉前后的空格),任何字符串都可以用这个方法.写法为:if(v.trim().length==0),表示如果去掉空格后的字符串的长度为0. < ...

  8. 模拟js中注册表单验证

    示例1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  9. vue项目element-ui框架中的弹窗中的表单验证清除问题

    问题回顾: 1.vue项目的在弹窗上的form表单验证,第一次点击新增时正常,第二次新增打开弹窗后由于表单内容为空,出现验证这种情况 2.为了解决上面的情况,在执行点击新增事件加上this.$refs ...

随机推荐

  1. 谈谈Ruby中的类变量

    Ruby中的类变量,很多文章都是不太建议使用的,主要原因在于他的一些特性容易导致犯一些错误,尤其在广泛使用元编程的时候. 初步接触类变量可能觉得他跟C++的类静态成员和Java中的静态变量没什么区别, ...

  2. Android IOS WebRTC 音视频开发总结（七七）-- WebRTC的架构和协议栈

    本文主要介绍WebRTC的架构和协议栈(我们翻译和整理的,译者:litie),最早发表在[编风网] 支持原创,转载必须注明出处,欢迎关注我的微信公众号blacker(微信ID:blackerteam ...

  3. gb2312

    ---恢复内容开始--- 字符集 gb2312(字全)采用2两个字节(一个汉字) utf-8(只有汉字)采用3个字节(一个汉字) html就是负责描述页面的语义:css负责描述页面的样式:js负责描述 ...

  4. TeXmacs 中输入狄拉克 braket 符号

    TeXmacs的数学模式下,默认会对括号进行自动补齐.这也导致输入狄拉克 braket 符号时得到的可能不是你想要的结果.经测试,可用以下输入方式输入 (以下 _ 表示光标所在位置,Tab代表Tab键 ...

  5. IE8下服务端获取客户端文件的路径为C：/fakePath问题的解决方案

    上一篇文章上提到,IE8下服务端获取客户端文件的路径时,会变成C:/fakePath问题,于是乎通过文件路径去获得文件大小就失败了. 上网搜了一下,主要原因是IE8因为安全考虑,在上传文件时屏蔽了真实 ...

  6. 常用的sql数据库语句

    1.说明:复制表(只复制结构,源表名:a 新表名:b) (Access可用)法一:select * into b from a where 1 <>1法二:select top 0 * i ...

  7. 初识Promise

    Promise对象 曾经用seajs开发后台管理的时候,矫情的PHPER非要JS内联到HTML文件中,方便他调用内容,还指定了jQueryFileUpload作为上传插件. 当时看到jQueryFil ...

  8. linux病毒

    linux病毒查杀规范 一.病毒发现 1.ps -A.ps -ef.ps -aux查看是否有异常进程 2.last,lastlog命令可查看最近登录的帐户及时间 3.查看/var/log/messag ...

  9. JVM配置

    1.堆设置 JVM中最大堆大小有三方面限制:操作系统位数(32-bt还是64-bit)限制:可用虚拟内存限制:系统的可用物理内存限制. java -Xmx3550m -Xms3550m -Xmn2g  ...

  10. 树莓派使用MJPG-Streamer实现网络监控

    http://blog.sina.com.cn/s/blog_abd39cc70102vrdt.html ——————————————————————————————————————————————— ...