本篇主要介绍angular中的表单验证:

表单验证主要有以下一些内容:

1. required指令: 相当于html5的required属性,验证不能为空

2. ng-maxlength属性: 验证内容的长度最大值

3. ng-minlength属性: 验证内容的长度最小值

4. 表单名.$valid : 这个属性用来获取表单验证的状态,如果所有的验证都通过了,它就是true,只要有一项不通过,它就是false

5. ng-disabled属性: 判断按钮是否禁用. 值为true时,禁用该按钮

6. type属性: type="email" , type="number" ,虽然这些都是html5的属性,但是在angular中用法一致,可以兼容不支持html5的浏览器,实现相同的功能

下面来看一个简单的表单验证的例子:

在还没有填写任何信息的时候,提交按钮是禁用的,

昵称不能为空 \ 邮箱需要符合邮箱相关格式 \ 年龄在1-3位数之间数字

全部通过验证后,提交按钮不禁用.

提交成功后,显示成功提示

代码如下:

  1. <!DOCTYPE html>
  2. <html ng-app="FormValidation" id="ng-app">
  3. <head>
  4.   <title>17.1表单验证</title>
  5.   <meta charset="utf-8">
  6.   <script src="../angular.js"></script>
  7.   <script src="script.js"></script>
  8.   <style type="text/css">
  9.     *{
  10.       font-family:'MICROSOFT YAHEI';
  11.       font-size:12px
  12.     }
  13.     h3 {
  14.       color:#CB2027
  15.     }
  16.   </style>
  17. </head>
  18. <body>
  19. <div>
  20.   <form name="signUp" ng-controller="myform">
  21.     <h1>注册:</h1>
  22.     <h3 ng-show="message">{{message}}</h3>
  23.     <span>昵称:</span><span><input type="text" ng-model="user.name" required/></span>
  24.     <br>
  25.     <span>邮箱:</span><span><input type="email" ng-model="user.email" required/></span>
  26.     <br>
  27.     <span>年龄:</span><span><input type="number" ng-model="user.age" required ng-maxlength="3" ng-minlength="1"/></span>
  28.     <br>
  29.     <button ng-disabled="!signUp.$valid" ng-click="addUser()">提交</button>
  30.   </form>
  31. </div>
  32. </body>
  33. </html>
  1. var formValidation = angular.module('FormValidation',[]);
  2. formValidation.controller('myform',function($scope){
  3.     $scope.user = {
  4.         name:'',
  5.         email:'',
  6.         age:''
  7.     };
  8.     $scope.message = "";
  9.     $scope.addUser = function(){
  10.         //把数据存入数据库   
            $scope.message = "提交成功,欢迎您,"+$scope.user.name;
  11.     }
  12. });

下面讲解一下这段代码:

①<form name="signUp" ng-controller="myform">

<button ng-disabled="!signUp.$valid" ng-click="addUser()">提交</button>

表单需要有一个名字,signUp.$valid就是这个表单的验证状态,这个状态决定了button按钮是否禁用.

当所有的验证都通过时,signUp.$valid值就是true,否则,就是false

②<button ng-disabled="!signUp.$valid" ng-click="addUser()">提交</button>

ng-disabled属性用于绑定元素是否禁用,如果是true就禁用, false则不禁用.

③required

添加该指令的元素,表示需要被验证.

  1. <input type="text" ng-model="user.name" required/>
    普通的text文本input,只验证是否为空
  1. <input type="email" ng-model="user.email" required/>
    type为'email'的input,验证是否为邮箱格式
  1. <input type="number" ng-model="user.age" required ng-maxlength="3" ng-minlength="1"/>
    type为'number'的input,验证是否为数字

④<input type="number" ng-model="user.age" required ng-maxlength="3" ng-minlength="1"/>

ng-maxlength 和 ng-minlength 属性,验证内容的长度

⑤<h3 ng-show="message">{{message}}</h3>

ng-show的值,不一定要是true或者false,这里的message为空的时候,就会是false,有值的话就是true.

所以,当message不为空的时候,h3就会被显示出来

打开时的页面:

当全部正确填写后,按钮不再被禁用:

点击提交后显示成功提示:

完整代码: https://github.com/OOP-Code-Bunny/angular/blob/master/OREILLY/17.1.%E8%A1%A8%E5%8D%95%E9%AA%8C%E8%AF%81.html

https://github.com/OOP-Code-Bunny/angular/blob/master/OREILLY/script.js

angular学习笔记(二十)-表单验证的更多相关文章

  1. Yii学习笔记之四（表单验证 api 翻译）

    1.表单验证 对于用户输入的全部数据,你不能信任,必须加以验证. 全部框架如此.对于yii 能够使用函数  yii\base\Model::validate()  进行验证 他会返回boolean值的 ...

  2. 【AngularJS学习笔记】AngularJS表单验证

    AngularJS表单验证 AngularJS提供了一些自带的验证属性 1.novalidate:添加到HTML的表单属性中,用于禁用浏览器默认的验证. 2.$dirty   表单有填写记录 3.$v ...

  3. redux-form的学习笔记二--实现表单的同步验证

    (注:这篇博客参考自redux-form的官方英文文档)左转http://redux-form.com/6.5.0/examples/syncValidation/ 在这篇博客里,我将用redux-f ...

  4. angular学习笔记(二十九)-$q服务

    angular中的$q是用来处理异步的(主要当然是http交互啦~). $q采用的是promise式的异步编程.什么是promise异步编程呢? 异步编程最重要的核心就是回调,因为有回调函数,所以才构 ...

  5. angular学习笔记(二十八-附2)-$http,$resource中的promise对象

    下面这种promise的用法,我从第一篇$http笔记到$resource笔记中,一直都有用到: HttpREST.factory('cardResource',function($resource) ...

  6. angular学习笔记(二十八-附1)-$resource中的资源的方法

    通过$resource获取到的资源,或者是通过$resource实例化的资源,资源本身就拥有了一些方法,$save,$delete,$remove,可以直接调用来保存该资源: 比如有一个$resour ...

  7. angular学习笔记(二十八)-$http(6)-使用ngResource模块构建RESTful架构

    ngResource模块是angular专门为RESTful架构而设计的一个模块,它提供了'$resource'模块,$resource模块是基于$http的一个封装.下面来看看它的详细用法 1.引入 ...

  8. angular学习笔记(二十六)-$http(4)-设置请求超时

    本篇主要讲解$http(config)的config中的timeout项: $http({ timeout: number }) 数值,从发出请求开始计算,等待的毫秒数,超过这个数还没有响应,则返回错 ...

  9. angular学习笔记(二十五)-$http(3)-转换请求和响应格式

    本篇主要讲解$http(config)的config中的tranformRequest项和transformResponse项 1. transformRequest: $http({ transfo ...

随机推荐

  1. base64 图片编码之再优化

    首先进入网站: http://b64.io/ 最多可减少图片体积容量近70%,建议不要优化base 64 图片格式为gif , 已实测如果用gif的话会增加容量.

  2. 从零开始学JavaScript三(变量)

    一.变量 ECMAscript变量是松散型变量,所谓松散型变量,就是变量名称可以保存任何类型的数据,每个变量仅仅是一个用于保存值的占位符. 定义变量时要使用var操作符 如: var message; ...

  3. Win10怎么设置点击任务栏上文件夹图标直接打开“我的电脑”？

    我们都知道Win10任务栏上的文件夹图标可以打开文件资源管理器,但是点击这个图标后打开的位置却是不固定的,有可能是库文件夹,也有可能是其他常用的位置.怎么设置点击这个图标后直接打开"此电脑& ...

  4. Java动态加载属性文件.properties

    当我们使用如下语句加载.properties时: ClassLoader classLoader = this.getClass().getClassLoader(); Properties prop ...

  5. properties转yml

    分享一个在线properties 转 yml工具,也支持yml转properteis: http://toyaml.com/ 域名非常好记:to yaml .com yml,即yaml文本格式文件的后 ...

  6. C# 的Timer 在javascript中的实现--基于Typescript

    class Timer { //js 内置的timer对象 private _jsInnerTimerObj: any; private _enable: boolean; private _hand ...

  7. MySQL中分组取第一条, 以及删除多余的重复记录

    检查重复记录 -- 检查重复code1 select count(identity) num, identity from event_log where code='code1' order by ...

  8. FZU - 2039 Pets (二分图匹配 2011年全国大学生程序设计邀请赛（福州）)

    Description Are you interested in pets? There is a very famous pets shop in the center of the ACM ci ...

  9. LNMP的的编译安装全过程

    一.对系统进行更新 yum update -y lsb_release -a 二.禁用SELINUX sed -i '/SELINUX/s/enforcing/disabled/' /etc/seli ...

  10. 在asp.net中执行存储过程（转）

    摘自:http://www.cnblogs.com/smhy8187/articles/677742.html 声明:本例用的数据库是系统提供的pubs数据库,表是是employee,编程语言用C# ...