angularjs学习第五天笔记(第二篇:表单验证升级篇)

您好,我是一名后端开发工程师,由于工作需要,现在系统的从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>

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

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

表单验证继续研究

  指令简单了解学习

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Material Design组件

Human Interface Guidelines —— Popovers

36711
来自专栏liuchengxu

如何使用 Vim 的 help

实际上,无论是 Vim 的基础知识还是进阶知识,大都可以从 help 中找到指引。但是我想很多人并没有意识到这一点,或者并没有重视这一点。RTFM (read ...

692
来自专栏Material Design组件

Human Interface Guidelines —— Action Sheets

2906
来自专栏思衍 Jax 专栏

企鹅辅导课程详情页毫秒开的秘密 - PWA 直出

随着近几年的前端技术的高速发展,越来越多的团队使用 React、Vue 等 SPA 框架作为其主要的技术栈。以 React 应用为例,从性能角度,其最重要的指标...

90711
来自专栏互联网杂技

20个为前端开发者准备的文档和指南6

1.SitePoint Sass Reference(SitePoint站点的Sass手册) 它是SitePoint自有的项目,是由我们的常驻高手Hugo Gi...

38910
来自专栏阿凯的Excel

在Excel内实现跳跃!

今天和大家分享Excel中跳跃的神器。 想提跳跃,你会想到什么? 嗯 思路对了,我们实现的就是在Excel内实现跳棋。直接说需求吧! 我有好几千行的数据 ...

3493
来自专栏angularejs学习篇

angularjs学习第五天笔记(第二篇:表单验证升级篇)

您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指...

1021
来自专栏编程

也许 vue+css3 做交互特效更简单

1.前言 做项目就难免会开发交互效果或者特效,而我最近开发的项目一直在使用 ,开发技术栈方面,理所当然就使用了 + 开发,过程中发现使用 + 开发特效,和 / ...

20010
来自专栏Material Design组件

Material Design —Snackbars &Toasts

2976
来自专栏游戏开发那些事

【Unity3d游戏开发】UGUI插件入门之游戏菜单

  ugui是unity4.6开始加入的一个新的ui系统,非常强大,下面我们将通过一系列博客的方式一起来学习一下ugui的使用。本篇博客会介绍如何使用ugui制...

2122

扫码关注云+社区