angularjs学习第四天笔记(第一篇:简单的表单验证)

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

  第四天,简单的表单验证,今天主要学习了angularjs中的表单验证的一些基本概念及其简单应用

 第一、表单验证的简单理解

    表单验证是angularjs中比较重要的一个核心功能

    表单验证可以结合html5的验证特殊使用,当然也可以禁用浏览器对表单的默认验证,添加属性【novalidate】即可

    表单验证毕竟只是前端js验证,在后端代码中一定需要对其数据的合法性做再次验证

    angularjs提供了一些常见的系统验证,当然也可以自定义表单验证

  第二、简单了解学习anjularjsz自带的表单验证

    1.必填验证:required,直接添加required属性即可

    2.最小长度:ng-minlength,使用ng-minlength=“最小长度值”

    3.最大长度:ng-maxlength,使用ng-maxlength=“最大长度值”

    4.模式匹配:ng-pattern,使用ng-pattren="模式匹配的正则表达式"

    5.邮箱:email,使用直接给文本框的type属性值赋值为email即可--type="email"

    6.数字:number,使用直接给文本框的type属性值赋值为number即可--type="number"

    7.网页地址:url,使用直接给文本框的type属性值赋值为url即可--type="url" 

 第四、表单中的控制变量

    1.表单的属性值访问方式为:表单名称.文本框名称.属性名称

    2.表单验证中用到的表单属性包括如下:

      未修改的表单:属性名称关键词【pristine】,bool类型,如果为修改为ture

      用户修改过的表单:属性关键词【dirty】,bool类型,只有修改了就为true

      合法的表单:属性关键词【valid】,bool类型,只有当表单内容合法才为true

      不合法表单:属性关键词【invalid】,bool类型,只要有不合法的都为true

      错误:属性关键词【error】,bool类型,只要有不合法的都为true

  第五、简单实现注册页面的表单验证

    在实现的方式上,根据不同的体验,大致有三种方式

    其一、对表单输入实时验证,只有表单验证都通过,才提交表单

       实现方式:通过控制提交按钮的可用性来实现

              ng-disabled="loginForm.$invalid"

      下面举例一个练习实例:

<!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]+$/"/>
            </div>
            <div class="alertCount">
                <span class="warning">*</span>
                <span class="warning" ng-show="loginForm.acount.$dirty&&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>
                <span class="success" ng-show="loginForm.acount.$dirty&&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" />
            </div> 
            <div class="alertCount">
                <span class="warning" ng-show="loginForm.name.$error.maxlength">姓名最大长度为20</span>
                <span class="success" ng-show="loginForm.name.$dirty&&loginForm.name.$valid">姓名输入正确</span>
            </div>
            </div>
            <div class="oneCount">
                <div class="titleCount">年龄:</div>
                <div class="valueCount">
                    <input type="number" name="age" ng-model="user.age" placeholder="请输入年龄" />
                </div>
            </div>
            <div class="oneCount">
                <div class="titleCount">密码:</div>
                <div class="valueCount">
                    <input type="password" name="pass" ng-model="user.pass" placeholder="必填:请输入密码,密码长度在6-20"
                           required="required" ng-minlength="6" ng-maxlength="20" />
                </div>
                <div class="alertCount">
                    <span class="warning">*</span>
                    <span class="warning" ng-show="loginForm.pass.$dirty&&loginForm.pass.$error.required">密码必填</span>
                    <span class="warning" ng-show="loginForm.pass.$error.minlength">最少长度为6</span>
                    <span class="warning" ng-show="loginForm.pass.$error.maxlength">最大长度为20</span>
                    <span class="success" ng-show="loginForm.pass.$dirty&&loginForm.pass.$valid">密码输入正确</span>
                </div>
                <div class="oneCount">
                    <div class="titleCount"></div>
                    <div class="valueCount">
                        <input type="submit" value="提交" ng-disabled="loginForm.$invalid" 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: "",
            name: "",
            age: "",
            pass: "",
            rePass: ""
        };

        //提交表单接受函数
        $scope.submitForm = function () {
           //// 表单真实提交逻辑
            alert("提交表单");
        }
    });

</script>    

    其二、先触发提交表单事件,在统一对表单数据验证,只有同验证通过才提交数据到后台处理

       实现方式:可以给表单添加一个属性,初始化赋值为false,只有提交后才赋值为ture

            验证结果提示信息,只有该属性值为true,才显示显示错误信息

<!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]+$/"/>
            </div>
            <div class="alertCount">
                <span class="warning">*</span>
                <span class="warning" ng-show="loginForm.submitted&&loginForm.acount.$dirty&&loginForm.acount.$error.required">acount必填</span>
                <span class="warning" ng-show="loginForm.submitted&&loginForm.acount.$error.minlength">最少长度为6</span>
                <span class="warning" ng-show="loginForm.submitted&&loginForm.acount.$error.maxlength">最大长度为20</span>
                <span class="warning" ng-show="loginForm.submitted&&loginForm.acount.$error.pattern">账号格式不符合要求(只能由数字和字母组成)</span>
                <span class="success" ng-show="loginForm.submitted&&loginForm.acount.$dirty&&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" />
            </div> 
            <div class="alertCount">
                <span class="warning" ng-show="loginForm.submitted&&loginForm.name.$error.maxlength">姓名最大长度为20</span>
                <span class="success" ng-show="loginForm.submitted&&loginForm.name.$dirty&&loginForm.name.$valid">姓名输入正确</span>
            </div>
            </div>
        <div class="oneCount">
                <div class="titleCount">年龄:</div>
                <div class="valueCount">
                    <input type="number" name="age" ng-model="user.age" placeholder="请输入年龄" />
                </div>
            </div>
        <div class="oneCount">
                <div class="titleCount">密码:</div>
                <div class="valueCount">
                    <input type="password" name="pass" ng-model="user.pass" placeholder="必填:请输入密码,密码长度在6-20"
                           required="required" ng-minlength="6" ng-maxlength="20" />
                </div>
                <div class="alertCount">
                    <span class="warning">*</span>
                    <span class="warning" ng-show="loginForm.submitted&&loginForm.pass.$dirty&&loginForm.pass.$error.required">密码必填</span>
                    <span class="warning" ng-show="loginForm.submitted&&loginForm.pass.$error.minlength">最少长度为6</span>
                    <span class="warning" ng-show="loginForm.submitted&&loginForm.pass.$error.maxlength">最大长度为20</span>
                    <span class="success" ng-show="loginForm.submitted&&loginForm.pass.$dirty&&loginForm.pass.$valid">密码输入正确</span>
                </div>
                <div class="oneCount">
                    <div class="titleCount"></div>
                    <div class="valueCount">
                        <input type="submit" value="提交" style="width:40px;" />
                    </div>
                </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: "",
            name: "",
            age: "",
            pass: "",
            rePass: ""
        };
        $scope.submitted = false;
        //提交表单接受函数
        $scope.submitForm = function () {
            if ($scope.loginForm.$valid) {
                //// 表单数据真实提交逻辑
            } else {
                $scope.loginForm.submitted = true;
            }
        }
    });

</script>

其三、失去焦点后验证

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

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

  表单失去焦点的验证

  表单提示信息展示优化,以便提高代码复用性

  自定义表单验证

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

Go语言的队列和堆栈实现方法

本文实例讲述了Go语言的队列和堆栈实现方法。分享给大家供大家参考。具体如下: golang,其实我的实现是利用container/list包实现的,其实cont...

32250
来自专栏知晓程序

开发 | 小程序开发有哪些坑?这份笔记都整理出来了

21630
来自专栏Golang语言社区

Go语言的队列和堆栈实现方法

本文实例讲述了Go语言的队列和堆栈实现方法。分享给大家供大家参考。具体如下: golang,其实我的实现是利用container/list包实现的,其实cont...

30180
来自专栏君赏技术博客

一键替换Key Mac软件的制作教程第一篇

我们要选择macOS的平台选择Cocoa Application的工程模板,点击Next.

15910
来自专栏10km的专栏

java:关于properties配置文件中的换行(多行)的坑

properties中都是以name=value这样的k-v字符串对形式保存的。 在写properties文件时,如果value非常长,看起来是非常不方便的...

21480
来自专栏技术墨客

React 渲染性能优化

在React内部已经使用了许多巧妙的技术来最小化由于Dom变更导致UI渲染所耗费的时间。对于很多应用来说,使用React后无需太多工作就会让客户端执行性能有质的...

10430
来自专栏技术墨客

React学习(7)—— 高阶应用:性能优化 原

在React内部已经使用了许多巧妙的技术来最小化由于Dom变更导致UI渲染所耗费的时间。对于很多应用来说,使用React后无需太多工作就会让客户端执行性能有质的...

14020
来自专栏小狼的世界

封装内容和功能 – YUI TabView使用小记

本文主要内容取自 Caridy Patino 在2008年发布的文章,原文中使用的是YUI2,笔者对例子做了一些更新,均使用了YUI3.1.1,文章中讨论的这个...

10920
来自专栏mySoul

作为window对象属性的元素 多窗口和窗体

如果html文档中用id属性为元素命名。并且如果 window对象没有此名字的属性,则window对象会赋予一个属性,其名字为id属性的值,其值指向该元素

15650
来自专栏angularejs学习篇

angularjs学习第四天笔记(第一篇:简单的表单验证)

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

12520

扫码关注云+社区

领取腾讯云代金券