angular支持IE8+浏览器，虽然性能很好，但是目前只适用于手机端项目

知识点：
域$scope
AngularJS基础指令
指令实现不同的功能
学习思路和方法

<link rel="stylesheet" href="lib/css/bootstrap.min.css"/>

<body ng-app="myApp" ng-controller="MainController">
angular.module('myApp', [])

    .controller('MainController', function ($scope) {

        $scope.submitForm = function () {

            console.log('表单提交了');

        };

    });
/***********************************/

<input class="form-control" type="text" ng-model="name" ng-minlength="4" ng-maxlength="10"/>

<div class="red">{{name}}</div>

<div>{{name}}</div>

<div>{{name}}</div>

<div>{{name}}</div>

<div>{{name}}</div>

<div>{{name}}</div>

<div>{{name}}</div>

/*******************************/

<form name="signUpForm" ng-submit="submitForm()">

    <div class="form-group">

        <label>用户名：</label>

        <input type="text"

               name="username"

               ng-model="username"

               ng-class="{'error': signUpForm.username.$invalid}"

               required

               ng-minlength="4"

               class="form-control"

        />

        <div>{{username}}</div>

        <div ng-if="signUpForm.username.$invalid &&

                    signUpForm.username.$touched">您输入的有误差</div>

        <div ng-if="signUpForm.username.$valid" class="correct">

            恭喜输入正确

        </div>

    </div>

</form>

/******************************/

<form name="signUpForm" ng-submit="submitForm()">

    <div class="form-group">

        <label>用户名：</label>

        <input type="text"

               name="username"

               ng-model="username"

               ng-class="{'error': signUpForm.username.$invalid}"

               required

               ng-minlength="4"

               class="form-control"

        />

        <input type="text"

               name="username2"

               ng-model="username2"

               class="form-control"

               ng-disabled="signUpForm.username.$valid"

        />

        <button class="btn btn-primary" ng-disabled="signUpForm.$invalid">提交</button>

    </div>

</form>

/**********************************/

    <style>

        .wrapper {

            width: 200px;

            margin: 30px auto;

        }

    </style>

</head>

<body ng-app="myApp" ng-controller="MainController">

<div class="wrapper">

    <h2>注册</h2>

    <form>

        <div class="form-group">

            <label>用户名：</label>

            <input type="text" name="username" class="form-control"/>

        </div>

        <div class="form-group">

            <label>密码：</label>

            <input type="password" name="password" class="form-control"/>

        </div>

        <div class="form-group">

            <label>确认密码：</label>

            <input type="password" name="password2" class="form-control"/>

        </div>

    </form>

</div>

/****************************/

<link rel="stylesheet" href="font-awesome-4.5.0/css/font-awesome.min.css"/>

    <link rel="stylesheet" href="lib/css/bootstrap.min.css"/>

    <style>

        .wrapper {

            width: 200px;

            margin: 30px auto;

        }

        p.error {

            color: red;

           /* display: none;*/

        }

        pre {

            white-space: normal;

        }

        p.input-result {

            position: relative;

            top: -26px;

            left: 179px;

        }

        p.success {

            color: #3C763D;

        }

    </style>

</head>

<body ng-app="myApp" ng-controller="MainController">

<!-- name="signUpForm" 注册表单 -->

<div class="wrapper">

    <h2>注册</h2>

    <form name="signUpForm" ng-submit="submitForm()">

        <div class="form-group" ng-class="{'has-success': signUpForm.username.$valid}">

            <label>用户名：</label>

            <pre>合法：{{signUpForm.username.$valid}}</pre>

            <pre>{{signUpForm.username}}</pre>

            <input type="text"

                   name="username"

                   class="form-control"

                   ng-model="userdata.username"

                   required

                   ng-minlength="4"

                   ng-maxlength="32"

            />

            <p class="error" ng-if="signUpForm.username.$error.required

            && signUpForm.username.$touched">

                用户名不可为空

            </p>

            <p class="error" ng-if="(signUpForm.username.$error.minlength

            || signUpForm.username.$error.maxlength) && signUpForm.username.$touched">

                用户名长度应在4~32位之间

            </p>

            <p class="fa fa-check input-result success"

                    ng-if="signUpForm.username.$valid"></p>

        </div>

        <div class="form-group" ng-class="{'has-success': signUpForm.password.$valid}">

            <label>密码：</label>

            <input type="password"

                   name="password"

                   class="form-control"

                   ng-model="userdata.password"

                   required

                   ng-minlength="6"

                   ng-maxlength="18"

            />

            <p class="error" ng-if="signUpForm.password.$error.required

            && signUpForm.password.$touched">

                密码不得为空

            </p>

            <p class="error" ng-if="(signUpForm.password.$error.minlength

            || signUpForm.password.$error.maxlength)

            && signUpForm.password.$touched">

                密码应该在6~18位之间

            </p>

            <p class="fa fa-check input-result success"

               ng-if="signUpForm.password.$valid"></p>

        </div>

        <div class="form-group" ng-class="{'has-success': signUpForm.password2.$valid}">

            <label>确认密码：</label>

            <input type="password"

                   name="password2"

                   class="form-control"

                   ng-model="userdata.password2"

                   required

                   compare="signUpForm.password"

            />

            <p class="error"></p>

        </div>

        <div class="form-group">

            <button class="btn btn-primary">注册</button>

        </div>

    </form>

</div>

<script src="lib/js/angular.min.js"></script>

<script src="js/main.js"></script>
angular.module('myApp', [])

    .controller('MainController', function ($scope) {

        $scope.userdata = {};

        $scope.submitForm = function () {

            console.log('表单提交了');

            // $scope.userdata是表单提交的内容

            console.log($scope.userdata);

            // Object {username: "aaa", password: "123456", password2: "456789"}

            if($scope.signUpForm.$invalid) {

                alert('请检查你输入的内容');

            } else {

                alert('提交成功！');

            }

        };

    })

// 创建指令

.directive('compare', function () {

    var o = {};

    return o;

});

AngularJS表单验证开发案例的更多相关文章

  1. angularjs表单验证checkbox

    angularjs中默认有表单验证的支持,见文末的refer 我想要验证至少要选择一个checkbox,否则就不能提交 但是checkbox貌似没有简单的方法,想来想去给出下面的解决方案 valida ...

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

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

  3. [Angularjs]表单验证

    写在前面 在开发中提交表单,并对表单的值进行验证是非常常见的操作,angularjs对表单验证提供了非常好的支持. demo 表单 <form name="myform" n ...

  4. AngularJS表单验证实现方法详解

    本文主要是通过源码实例和大家分享AngularJS中的表单验证相关知识,希望通过本文的分享,对大家学习AngularJS有所帮助. 1.常规表单验证: 2.AngularJs中提供的表单验证实例. 实 ...

  5. AngularJs表单验证

    常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" requir ...

  6. AngularJS表单验证,手动验证或自动验证

    AngularJS的表单验证大致有两种,一种是手动验证,一种是自动验证. 手动验证 所谓手动验证是通过AngularJS表单的属性来验证.而成为AngularJS表单必须满足两个条件:1.给form元 ...

  7. AngularJS 表单验证小结

    注:本文所述的表单验证即AngularJS自带的表单验证,无需引入第三方的插件 一.常用的验证特性标签 1.非空 为input加入一个required属性即可,例如: <input type=& ...

  8. angularjs 表单验证（不完整版）

    针对项目实践表单验证总结: angular 的 form表单验证:form内需要novalidate取消默认验证,用ng自己的验证,form的名字是非常必要的 栗子:以注册为栗子,下面是注册的部分: ...

  9. 彻底弄懂angularJS表单验证

    常用的表单验证指令 (基本概念) 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" ...

随机推荐

  1. 线段树 SP2713 GSS4 - Can you answer these queries IV暨 【洛谷P4145】 上帝造题的七分钟2 / 花神游历各国

    SP2713 GSS4 - Can you answer these queries IV 「题意」: n 个数,每个数在\(10^{18}\) 范围内. 现在有「两种」操作 0 x y把区间\([x ...

  2. 开源linux远程登录、远程文件管理（ftp）工具

    ssh远程登录用 PuTTY.Xshell 5 如果觉得命令行下敲命令管理文件麻烦,就用WinSCP.FileZilla Client(SSH模式),可做到文件上传.下载.改权限等等,很便捷

  3. Linux 磁盘 分区 挂载点的理解

    在Linux中一切皆文件: 虚拟文件系统(Virtual File System, 简称 VFS), 是 Linux 内核中的一个软件层,用于给用户空间的程序提供文件系统接口:同时,它也提供了内核中的 ...

  4. hau 1870 愚人节的礼物（栈）

    愚人节的礼物 Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...

  5. java TestNG测试报告美化

    测试报告 执行完测试用例之后,会在项目的test-output(默认目录)下生成测试报告 打开index.html文件,测试结果摘要,包括:套件名.测试用例成功数.测试用例失败数.测试用例忽略数和te ...

  6. bzoj1008: [HNOI2008]越狱 数学公式+快速幂

    bzoj1008: [HNOI2008]越狱      O(log N)---------------------------------------------------------------- ...

  7. vue快速入门（二）

    工程搭建完成,接下来如何使用. 首先找到src\rooter\index.js文件 这里是路由文件配置要访问的组件,这个会在后期说明 这里的components/A 是组件里边的 需要手动 创建A.v ...

  8. 2019.03.22 读书笔记 Linq中的IEnumerable与IQueryable

    Linq主要分为 Linq to object .Linq to XML .Linq to sql(现在都用EF了). 针对object和sql,微软分别设计了两套接口IEnumerable.IQue ...

  9. javascript获取浏览器高度与宽度信息

    网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offsetWidth ...

  10. Linux平台命令挂载U盘——实现数据共享

    废话少说,一一道来,Linux中按照步骤来做就可以啦.(嵌入式平台) 1.先看看本地的mount信息 # mountrootfs on / type rootfs (rw)/dev/root on / ...