1.入门

<form ng-controller="validationController" name="form1" novalidate>
       <p> <input type="submit" ng-disabled="form1.$invalid">     
         <input type="email" name="myemail" ng-model="email"  ng-minlength="10" ng-maxlength="50" required>

　　　　　　　　// 使用了 ng-show指令， color:red 在邮件是 $dirty 或 $invalid 才显示。
         <span style="color:red" ng-show="form1.myemail.$dirty && form1.myemail.$invalid">

            <span ng-show="form1.myemail.$error.required">Email is required.</span>
            <span ng-show="form1.myemail.$error.email">Invalid email address.</span>
           <span ng-show="form1.myemail.$error.minlength">min length 10.</span>
           <span ng-show="form1.myemail.$error.maxlength">max length 50.</span>

</span>
       </p>
     </form>

     表单属性 novalidate 用于禁用浏览器默认的验证。
$dirty    表单有填写记录
$valid字段内容合法的
$invalid    字段内容是非法的
$pristine    表单没有填写记录 
 

2.使用angular-messages

<!DOCTYPE html>
<html>
<head>
    <title>Form</title>
     <script type='text/javascript' src='http://cdn.bootcss.com/angular.js/1.4.9/angular.js'></script>
     <script type='text/javascript' src='http://cdn.bootcss.com/angular.js/1.4.9/angular-messages.js'></script>    
    <style type="text/css">
     .form1 {
       transition:all linear 0.5s;
       background: transparent;
     }
    </style>
</head>
<body ng-app="a8_8">
    <form name="form1" ng-controller="form1Controller" class="form1" novalidate>
     <label ng-show="user.id != undefined" ng-model="user.id">
        user id:<span>{{user.id}}</span>
     </label><br>   
     <label>Enter text: <input type="email" ng-model="email1" name="myemail" required  ng-minlength="10"  maxlength="15" /> </label>
      <div style="color:red" ng-messages="form1.myemail.$error" ng-messages-multiple role="alert" ng-if="form1.myemail.$touched">
        <div ng-message="required">Email is required.</div>
        <div ng-message="email">Invalid email address.</div>
        <div ng-message="minlength">min length 10.</div>
        <div ng-message="maxlength">max length 50.</div>        
      </div>
      <p> <input type="submit" value="提交" ng-disabled="form1.$invalid" /></p>   
      <span class="error" ng-show="form1.myemail.$error.required">Required!</span><br>
        <code>form1.myemail.$valid = {{form1.myemail.$valid}}</code><br>
        <code>form1.myemail.$error = {{form1.myemail.$error}}</code><br>
        <code>form1.$valid = {{form1.$valid}}</code><br>
        <code>form1.$error.required = {{!!form1.$error.required}}</code><br>    
     <button ng-click="reset()" ng-disabled="isUnchanged(user)">RESET</button>
     <button ng-click="update(user)" ng-disabled="form1.$invalid || isUnchanged(user)">SAVE</button> <br>
</body>
</html>

3.数据提交

已经不用传统的submit，是基于model 的后台处理

　　 <script type="text/javascript">

var app = angular.module('a8_8',  ['ngMessages']);
        app.controller('form1Controller', ['$scope',function($scope) {
            $scope.user = {email:'sweet_dreams@aliyun.com'};
            $scope.master = {email:'sweet_dreams@aliyun.com'};
            $scope.update = function(user) {
                if($scope.form1.$valid){
                    alert('通过验证可以提交表单');
                    $scope.master = angular.copy(user);
                    console.log( 'save'+user);     
                    user.id=1;
                    console.log( user);                         
                }else{
                    alert('表单没有通过验证');
                }                 
            };
            $scope.reset = function() {
                $scope.user = angular.copy($scope.master);
            };
            $scope.isUnchanged = function(user) {
                return angular.equals(user, $scope.master);
            };             
         }]);
   </script>

 
 

Angularjs学习笔记5_form1的更多相关文章

  1. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  2. AngularJs学习笔记--expression

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...

  3. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

  4. AngularJs学习笔记--Guide教程系列文章索引

    在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看 ...

  5. AngularJs学习笔记--bootstrap

    AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...

  6. AngularJs学习笔记--html compiler

    原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...

  7. AngularJs学习笔记--concepts(概念)

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...

  8. AngularJS学习笔记2——AngularJS的初始化

    本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...

  9. AngularJs学习笔记--Using $location

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...

随机推荐

  1. 【权值分块】bzoj1503 [NOI2004]郁闷的出纳员

    权值分块,离散化非常蛋疼,只能离散化搞…… 需要支持操作:删除<=某个值得所有权值==打标记 O(sqrt(n)) 码长和我的平衡树差不多……速度快3倍左右. #include<cstdi ...

  2. 【AC自动机/fail树】BZOJ3172- [Tjoi2013]单词

    [题目大意] http://www.lydsy.com:808/JudgeOnline/problem.php?id=3172 某人读论文,一篇论文是由许多单词组成.但他发现一个单词会在论文中出现很多 ...

  3. 通过python的logging模块输出日志文件

    import logging import sys #获取logger实例 logger = logging.getLogger("baseSpider") # 括号后面填运行的文 ...

  4. 1.4（Spring学习笔记）Spring-JDBC基础

    一.Spring JDBC相关类 1.1 DriverManagerDataSource DriverManagerDataSource主要包含数据库连接地址,用户名,密码. 属性及含义如下配置所示: ...

  5. 金融应用，计算酬金 Exercise06_11

    /** * @author 冰樱梦 * 时间:2018年下半年 * 题目:金融应用,计算酬金 * */ public class Exercise06_11 { public static void ...

  6. Java高级架构师（一）第02节：分模块、分工程管理

    本节课程的目标在于:利用Maven构建分工程.分模块的空项目. -------- 基本的构建大致相同,有一个强调调点: 在总web的pom里边(architecture01web中),加入要合并的wa ...

  7. 使用openssl生成密钥、加密和签名

    openssl genrsa -out rsakey.pem 1024  //生成1024bit的RSA密钥,并保存到rsakey.pem,此处未对密钥进行加密 openssl genrsa -aes ...

  8. [JQuery]用InsertAfter实现图片走马灯展示效果2——js代码重构

    写在前面 前面写过一篇文章<[JQuery]用InsertAfter实现图片走马灯展示效果>,自从写过那样的也算是使用面向对象的写法吧,代码实在丑陋,自从写过那样的代码,就是自己的一块心病 ...

  9. 采用Apache作为WebLogic Server集群的负载均衡器

    强烈建议不要使用WebLogic ClusterServlet作为Proxy进行生产环境的负载均衡, 那个是用来进行集群的功能测试的,Oracle的产品文挡也写得比较清楚. 如果采用软件的负载均衡,可 ...

  10. Fatal error: Maximum execution time of 30 seconds exceeded in

    Fatal error: Maximum execution time of 30 seconds exceeded in C:\Program Files\Apache Software Found ...