您好，我是一名后端开发工程师，由于工作需要，现在系统的从0开始学习前端js框架之angular，每天把学习的一些心得分享出来，如果有什么说的不对的地方，请多多指正，多多包涵我这个前端菜鸟，欢迎大家的点评与赐教。谢谢！

　　第五天，昨天学习了简单的表单验证，在昨天的基础上，今天主要对表单验证进一步学习研究。

　　今天主要学习一下几点：文本框失去焦点后验证、表单验证提示信息显示处理优化

　　第一、文本框失去焦点后验证

　　　　文本框失去焦点验证效果：文本框失去焦点后对其合法性验证

　　　　文本框失去焦点验证实现方式：定义一个指令（指令后续专门研究）当文本框失去焦点是设置focused=true,获得焦点为false

　　　　　　　　　　　　　　　　　　提示显示信息添加并列显示条件（focused）

　　　　举一个具体的练习实例

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <style type="text/css">

        .oneCount {

            width: 1000px;

            height: 60px;

            line-height: 60px;

            border-bottom: 1px solid blue;

        }

            .oneCount .titleCount {

                float: left;

                width: 150px;

                text-align: right;

            }

            .oneCount .valueCount {

                float: left;

                width: 300px;

                text-align: right;

            }

                .oneCount .valueCount input {

                    width: 300px;

                }

            .oneCount .alertCount {

                float: left;

                width: 520px;

                margin-left: 20px;

            }

                .oneCount .alertCount span {

                    float: left;

                    margin-left: 10px;

                    color: #ff0000;

                }

        .success {

            color: #19e1cf !important;

        }

        input .ng-pristine {

            color: #808080;

            border-bottom: 1px solid #ff0000;

        }

        input .ng-dirty {

            color: #000000;

        }

        input .ng-valid {

            color: #000000;

        }

        input .ng-invalid {

            color: #ff0000;

        }

    </style>

</head>

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

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

        <div class="oneCount">

            <div class="titleCount">账号：</div>

            <div class="valueCount">

                <input type="text" name="acount" ng-model="user.acount"

                       placeholder="必填：账号必须由数字字母组合，长度在6-20"

                       required="required" ng-minlength="6" ng-maxlength="20"

                       ng-pattern="/^[0-9a-zA-Z]+$/"

                       ng-focus />

            </div>

            <div class="alertCount">

                <span class="warning">*</span>

                <div class="warning"

                     ng-show="loginForm.acount.$invalid && ((!loginForm.acount.$focused && loginForm.acount.$dirty) || loginForm.submitted )">

                    <span class="warning"

                          ng-show="loginForm.acount.$error.required">acount必填</span>

                    <span class="warning"

                          ng-show="loginForm.acount.$error.minlength">最少长度为6</span>

                    <span class="warning"

                          ng-show="loginForm.acount.$error.maxlength">最大长度为20</span>

                    <span class="warning"

                          ng-show="loginForm.acount.$error.pattern">账号格式不符合要求（只能由数字和字母组成）</span>

                </div>

                <span class="success"

                      ng-show="!loginForm.acount.$focused &&loginForm.acount.$valid">账号输入正确</span>

            </div>

        </div>

        <div class="oneCount">

            <div class="titleCount">姓名：</div>

            <div class="valueCount">

                <input type="text" name="name" ng-model="user.name" placeholder="请输入姓名" ng-maxlength="20"

                       ng-focus />

            </div>

            <div class="alertCount">

                <span class="warning" ng-show="!loginForm.name.$focused && loginForm.name.$error.maxlength">姓名最大长度为20</span>

                <span class="success" ng-show="!loginForm.name.$focused && loginForm.name.$dirty && loginForm.name.$valid">姓名输入正确</span>

            </div>

        </div>

        <div class="oneCount">

            <div class="titleCount"></div>

            <div class="valueCount">

                <input type="submit" value="提交" style="width:40px;" />

            </div>

        </div>

    </form>

</body>

</html>

<script src="Scripts/angular.js"></script>

<script type="text/javascript">

    var app = angular.module("myApp", []);

    app.controller("myContro", function ($scope) {

        $scope.user = {

            acount: "w额外",

            name: "",

            age: "",

            pass: "",

            rePass: ""

        };

        $scope.submitted = false;

        //提交表单接受函数

        $scope.submitForm = function () {

            if ($scope.loginForm.$valid) {

                //// 表单数据真实提交逻辑

            } else {

                $scope.loginForm.submitted = true;

            }

        }

    });

    app.directive('ngFocus', function () {

        var FOCUS_CLASS = "ng-focused";

        return {

            restrict: 'A',

            require: 'ngModel',

            link: function (scope, element, attrs, ctrl) {

                ctrl.$focused = false;

                element.bind('focus', function (evt) {

                    element.addClass(FOCUS_CLASS);

                    scope.$apply(function () {

                        ctrl.$focused = true;

                    });

                }).bind('blur', function () {

                    element.removeClass(FOCUS_CLASS);

                    scope.$apply(function () {

                        ctrl.$focused = false;

                    })

                })

            }

        }

    })

</script>

　　第二、表单验证提示信息显示处理优化

　　　　上面的表单验证的提示信息在体验上不是很友好，同一个文本框有可能同时显示多个提示信息

　　　　新版本的angularjs中，引入了ngMessages指令，用于更加友好的处理方式

　　　　　　ngmessages同时指出提示模板引入，通过ng-messges-include 来加载外部提示模板

　　直接上练习例子

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

</head>

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

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

        <div class="oneCount">

            <div class="titleCount">账号：</div>

            <div class="valueCount">

                <input type="text" name="acount" ng-model="user.acount"

                       placeholder="必填：账号必须由数字字母组合，长度在6-20"

                       required="required" ng-minlength="6" ng-maxlength="20"

                       ng-pattern="/^[0-9a-zA-Z]+$/"

                       ng-focus />

            </div>

            <div class="alertCount">

                <span class="warning">*</span>

                <div class="warning" ng-messages="loginForm.acount.$error">

                    <ng-messages-include src="template/required.html"></ng-messages-include>

                    <span class="warning"

                          ng-message="minlength">该项最少长度为6</span>

                    <span class="warning"

                          ng-message="maxlength">该项最大长度为20</span>

                    <div ng-messages-include="template/numberAndZhiMu.html">

                    </div>

                </div>

            </div>

        </div>

        <div class="oneCount">

            <div class="titleCount"></div>

            <div class="valueCount">

                <input type="submit" value="提交" style="width:40px;" />

            </div>

        </div>

    </form>

</body>

</html>

<script src="Scripts/angular.js"></script>

<script src="Scripts/angular-messages.js"></script>

<script type="text/javascript">

    var app = angular.module("myApp", ['ngMessages']);

    app.controller("myContro", function ($scope) {

        $scope.user = {

            acount: ""

        };

        $scope.submitted = false;

        //提交表单接受函数

        $scope.submitForm = function () {

            if ($scope.loginForm.$valid) {

                //// 表单数据真实提交逻辑

            } else {

                $scope.loginForm.submitted = true;

            }

        }

    });

</script>

时间不早了，明天在仔细研究该问题

今天就到此为止，明天继续研究表单验证，明天学习包括如下几点

　　表单验证继续研究

　　指令简单了解学习

　　

angularjs学习第五天笔记（第二篇：表单验证升级篇）的更多相关文章

  1. angular学习的一些小笔记(中)之表单验证

    表单验证 我去,我感觉我这个人其实还是一个很傻逼的一个人,老是因为拼错了一个单词或者怎么样就浪费我很长时间,这样真的不行不行,要正确对待这个问题,好了,说正题吧,angular也有表单验证minlen ...

  2. jQuery框架学习第十一天：实战jQuery表单验证及jQuery自动完成提示插件

    jQuery框架学习第一天:开始认识jQueryjQuery框架学习第二天:jQuery中万能的选择器jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQuer ...

  3. angular学习笔记(二十)-表单验证

    本篇主要介绍angular中的表单验证: 表单验证主要有以下一些内容: 1. required指令: 相当于html5的required属性,验证不能为空 2. ng-maxlength属性: 验证内 ...

  4. Spring Boot笔记八：表单验证

    所谓的表单验证,就是为了防止用户乱输入的,这个问题前端的HTML5就可以判断了,其实不需要后端来验证,这里还是讲一下后端验证 首先,我们的Person类,我们加上一些表单验证的注释,如下: packa ...

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

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

  6. 【代码笔记】Web-JavaScript-JavaScript表单验证

    一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  7. Angular 表单验证 基础篇

    <div class="nav"> <h4>表单验证</h4> <form ng-app="myApp" name=& ...

  8. 五十四：WTForms表单验证之自定义表单验证器

    如果想要对表单中的某个字段进行自定义验证,则需要对这个字段进行单独的验证1.定义一个方法,命名规则为:validate_字段名(self, filed)2.在方法中,使用filed.data获取字段的 ...

  9. 五十二：WTForms表单验证之基本使用

    作用:1.做表单验证,把用户提交的数据验证是否合法2.做模板渲染 安装:pip install wtforms 表单验证1.自定义一个表单类,继承wtforms.Form2.定义好需要验证的字段,字段 ...

随机推荐

  1. CQOI2018 简要题解

    破解D-H协议 列个式子会发现是BSGSBSGSBSGS的模板题,直接码就是了. 代码: #include<bits/stdc++.h> #include<tr1/unordered ...

  2. Python开发——6.文件操作

    一.文件操作 1.文件操作的处理流程 打开文件得到文件句柄并赋值给一个变量====>通过句柄对文件进行分析====>关闭文件 #1. 打开文件,得到文件句柄并赋值给一个变量 f=open( ...

  3. canvas 旋转

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. InternalResourceViewResolver视图解析器（转）

    转载地址:https://www.cnblogs.com/liruiloveparents/p/5054605.html springmvc在处理器方法中通常返回的是逻辑视图,如何定位到真正的页面,就 ...

  5. iOS安装包瘦身的那些事儿

    在我们提交安装包到App Store的时候,如果安装包过大,有可能会收到类似如下内容的一封邮件: 收到这封邮件的时候,意味着安装包在App Store上下载的时候,有的设备下载的安装包大小会超过100 ...

  6. linux配置防火墙和重启防火墙

    1.在linux系统里面找到并打开编辑配置防火墙的文件,执行命令: vi /etc/sysconfig/iptables. 2.在上面打开的文件里面加入一下语句: -A INPUT -m state ...

  7. 分布式系统中 Unique ID 的生成方法

    http://darktea.github.io/notes/2013/12/08/Unique-ID Snowflake 生成的 unique ID 的组成 (由高位到低位): 41 bits: T ...

  8. Burpsuite常用模块详解以及渗透测试上的运用

    0x00前言 哪有什么前言,大家好,我是浅安.QQ:320229344... 0x01 JDK的安装,以及Burpsuite的成功开启. burpsuite基于JAVA环境才能正常运行的.所以要先安装 ...

  9. 关于height、offsetheight、clientheight、scrollheight、innerheight、outerheight的区别一览

    平时,不管在pc端页面还是移动端页面,因为我们一般很少会设置某个块的的高度,但是呢,我有时候有需要取到这些高度以便于我们方便进行判断和下一步的编写.一般这个时候我都是直接的获取一个块的高度.heigh ...

  10. spring框架学习笔记7：事务管理及案例

    Spring提供了一套管理项目中的事务的机制 以前写过一篇简单的介绍事务的随笔:http://www.cnblogs.com/xuyiqing/p/8430214.html 还有一篇Hibernate ...