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. springMvc发布restFull风格的URL

    package zpark.controller; import org.springframework.stereotype.Controller; import org.springframewo ...

  2. AngularJS 中利用 Interceptors 来统一处理 HTTP 的错误(reproduce)

    原文:http://chensd.com/2016-03/Angular-Handle-Global-Http-Error-with-Interceptors.html?utm_source=tuic ...

  3. 获取wifi信息

    最近有个项目需要获取手机附近wifi列表,查了许多资料发现,现在只能查到wifi的SSID,并且用到的是私有api,无法通过app store审核,这里记录一下,方便学习,新手勿喷,欢迎大神指教(wi ...

  4. SQL查询一周内过生日的用户

    SELECT birthday, )) + '-' + )) + '-' + )) AS datetime) AS Nbirthday FROM CRM_Customer WHERE birthday ...

  5. POJ2513 Colored Sticks(欧拉)

    题目链接. 题目大意: 给很多木棍,两端被涂了颜色.任意两根木棍的相同颜色处可以拼接在一起,问有没有可能将所有的木棍都连起来,成一条直线? 分析: 考点,欧拉道路. 将一根木棍看成一条边,两端的颜色看 ...

  6. 原生js中slice()方法和splice()区别

    slice()方法和splice()方法都是原生js中对数组操作的方法. slice(),返回一个新的数组,该方法可从已有的数组中返回选定的元素.例如:arrObject(start,end),sta ...

  7. hadoop(一)之初识大数据与Hadoop

    前言 从今天起,我将一步一步的分享大数据相关的知识,其实很多程序员感觉大数据很难学,其实并不是你想象的这样,只要自己想学,还有什么难得呢? 学习Hadoop有一个8020原则,80%都是在不断的配置配 ...

  8. RabbitMQ的基本使用到高级特性

    简介 继上一篇 CentOS上安装RabbitMQ讲述RabbitMQ具体安装后,这一篇讲述RabbitMQ在C#的使用,这里将从基本用法到高级特性的使用讲述. 前序条件 这里需要增加一个用户,并且设 ...

  9. Oracle Start With关键字

    Oracle Start With关键字 前言 旨在记录一些Oracle使用中遇到的各种各样的问题. 同时希望能帮到和我遇到同样问题的人. Start With (树查询) 问题描述: 在数据库中, ...

  10. 【BZOJ4827】【HNOI2017】礼物(FFT)

    [BZOJ4827][HNOI2017]礼物(FFT) 题面 Description 我的室友最近喜欢上了一个可爱的小女生.马上就要到她的生日了,他决定买一对情侣手 环,一个留给自己,一 个送给她.每 ...