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等来做一些表单验证

<script>

var m1 = angular.module('myApp',[]);

m1.controller('Aaa',['$scope',function($scope){

    $scope.text = 'hello';

    $scope.regText = {

        regT : 'default',

        regList : [

           { name : 'default', text : '请输入用户名' },

           { name : 'required', text : '不能为空' },

           { name : 'pattern', text : '只能为字母' },

           { name : 'pass', text : '√' },

        ],

        change : function(err){

            console.log(err);

            for(var attr in err){

                if(err[attr]==true){

                    $scope.regText.regT = attr;

                    return;

                }

            }

            $scope.regText.regT = 'pass';

        }

    };

}]);

</script>

</head>

<body>

<div ng-controller="Aaa">

    <form novalidate name="nForm">

        <label>用户名：

            <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)">

            <span ng-repeat="re in regText.regList | filter:regText.regT ">{{re.text}}</span>

        </label><br><br>

        <label>密码：

            <input type="password" name="nPas" ng-model="text" required ng-minlength="5" ng-pattern="/^[a-zA-Z]+$/">

            <span>请输入密码</span>

        </label>

    </form>

</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. 1045 - Access denied for user 'root'@'localhost'(using password NO)解决方案

    原因为输入了不正确的密码,连接数据库时输入正确的密码即可! 另外一个原因是安装MySQL后MySQL产生了一个随机密码,而登录的时候没有将随机密码填上,解决方案见:http://www.cnblogs ...

  2. python之GUI编程（二）win10 64位 pygame的安装

    pygame的下载网址: http://www.pygame.org/download.shtml 我下载了第一个 很显然,安装的时候出现了如图中的尴尬,更改了安装目录后,在Python shell中 ...

  3. Java是目前最广泛的_______编程语言

    计算机网络 注意:在配置环境变量时,classpath是为找文件服务的

  4. Rendering pipeline overview(读书笔记1 --- Real-Time rendering)

    1. Rendering pipeline的作用就是在给定的虚拟相机.三维物体.光源.着色方程式.纹理等的条件下产生(渲染)二维图像 2. pipeline包含很多个stage,其效率由最慢的stag ...

  5. 浅析tomcat nio 配置

    [尊重原创文章摘自:http://blog.csdn.net/yaerfeng/article/details/7679740] tomcat的运行模式有3种.修改他们的运行模式.3种模式的运行是否成 ...

  6. python基础知识2——基本的数据类型——整型，长整型，浮点型，字符串

    磨人的小妖精们啊!终于可以归置下自己的大脑啦,在这里我要把--整型,长整型,浮点型,字符串,列表,元组,字典,集合,这几个知识点特别多的东西,统一的捯饬捯饬,不然一直脑袋里面乱乱的. 对于Python ...

  7. python 获取一个列表有多少连续列表

    python 获取一个列表有多少连续列表 例如 有列表 [1,2,3] 那么连续列表就是 [1,2],[2,3],[1,2,3] 程序实现如下: 运行结果:

  8. PHP实现队列及队列原理

    看看各语言实现队列的方法:PHP实现队列:第一个元素作为队头,最后一个元素作为队尾 <?php /** * 队列就是这么简单 * * @link http://www.phpddt.com */ ...

  9. 9.3 js基础总结3

    2.后增量/后减量运算符 ++,-- var i = 10; var a = i++; // i = i + 1; alert(a); 3.比较运算符(>,<,>=,<=,== ...

  10. bat批处理重命名问题

    因为要重命名的字符串中有文字,导致重命名出来的文件名都变为乱码了,查理一下需要加两句话 1. @Echo Off Chcp 65001>nul SetLocal EnableDelayedExp ...