首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

AngularJS实现表单验证

作者：手机用户2502917001 | 来源：互联网 | 2022-10-13 11:53
客户端表单验证是AngularJS里面最酷的功能之一。AngularJS表单验证可以让你从一开始就写出一个具有交互性和可相应的现代HTML5表单。在AngularJS中，有许多表单验证指令。在这里，我们将谈谈几个最流行指令，然后我们将讨论如何编写自定义的验证。

虽然我不是前端程序员，但明白前端做好验证是多么重要。

因为这样后端就可以多喘口气了，而且相比后端什么的果然还是前端可以提高用户的幸福感。

AngularJS提供了很方便的表单验证功能，在此记录一番。

首先从下面这段代码开始

代码如下:


   

Email:
       
       
            Email is required.
            Invalid email address.
       
   


   


       
   




input标签的一些验证选项，通常和HTML5标记搭配使用。

必填


长度

使用指令ng-minlength/ng-maxlength


特定格式
例如电子邮件、URL、数字，将type设置为相应类型即可，例如：

代码如下:




模式匹配

使用指令ng-pattern，例如：

代码如下:


表单属性，通过这些属性可以更容易地对表单进行操作

pristine/dirty
表示是否已修改，例如

代码如下:



    {{mainForm.userEmail.$pristine}}
    {{mainForm.userEmail.$dirty}}

以formName.fieldName.$pristine方式访问，input必须有ng-model声明。

代码如下:

valid/invalid

表示是否通过验证。

代码如下:

$error

表单验证信息，验证不通过时返回相应信息。

AngularJS为表单状态提供了相应地css class

代码如下:

.ng-pristine
.ng-dirty
.ng-valid
.ng-invalid

例如，让验证通过为绿色，失败为红色:

代码如下:

input.ng-valid {
    color: green;
}
input.ng-invalid {
    color: green;
}

给出的例子中仅仅是一个email的验证就写了这么多，如果再加几个field，再加几种不同的提示，再加上几个事件，代码会变得杂乱不堪。

事实上并不推荐这样做，我们有更好的方法。
就是使用angular-messages.js

首先，不要忘了这两步

代码如下:


angular.module('myApp', ['ngMessages'])

好，先用ng-messages和ng-message替换掉那些重复的东西，上面的例子变成:

代码如下:


   

Email:
                type="email" name="email" ng-model="myEmail" ng-minlength="3" ng-maxlength="50" required />
       


           

Email is required.


           

Invalid email address.


           

min length 10


           

max length 50


       

   


   


       
   



功能上没有任何变化，只是把重复的代码全部去掉了。
注意区分ng-messasges和ng-message，有没有感觉有点像with()&＃63; 后面的ng-messages-multiple，这里用作同时让多个提示出现。

但这样仍然不够好，就算省去了ng-message中的内容，但是多个field中都存在required验证时仍然会有重复。
而且，如果不同页面中的表单都涉及到相同的内容时重复的验证提示会越来越多。
为了解决这个问题，我们可以使用ng-messages-include指令。
该指令用来引用模板，比如上面的例子变为:

代码如下:


   

Email:
                type="email" name="email" ng-model="myEmail" ng-minlength="3" ng-maxlength="50" required />
       


       

   


   


       
   



并不复杂，我们再加点东西。
为了让提示更友好(&＃63;)一些，我们试试实现光标离开后出现提示的效果。
这时候用指令(directive)会方便很多，在这里先涉及一点和指令相关的内容。

先运行起来再说:

代码如下:

var myApp = angular.module('myApp',[])
    .controller('validationController', ['$scope',function($scope) {
        $scope.user = 'Kavlez';
        $scope.email = 'sweet_dreams@aliyun.com';
    }])
    .directive('hintOnBlur', [function() {
        return {
            require: 'ngModel',
            link: function(scope, element, attrs, ctrl) {
                ctrl.focused = false;
                element.bind('focus', function(evt) {
                    scope.$apply(function() {ctrl.focused = true;});
                }).bind('blur', function(evt) {
                    scope.$apply(function() {ctrl.focused = false;});
                });
            }
        }
    }]);

此处我们用focused来判断光标是否在某个属性上，当使用了hintOnBlur指令的对象上发生focus或blur事件时focused的状态发生变化。

表单也跟着改变一下，使用方法如下:

代码如下:


   

Email:
       
       


       

   


   


       
   



在ng-show中再加入对focused的判断，false时出现提示。

现在看起来像那么回事了。
自定义验证方式与有效性(validity)，这个也用到指令(directive)。
验证填写的email是否已占用，这里简单模拟一下:

代码如下:

.directive('isAlreadyTaken', function() {
    return {
        require: 'ngModel',
        link: function(scope, ele, attrs, ctrl) {
            ctrl.$parsers.push(function(val) {
                ctrl.$setValidity('emailAvailable', false);
                var emailTable = [
                    'K@gmail.com',
                    'a@gmail.com',
                    'v@gmail.com',
                    'l@gmail.com',
                    'e@gmail.com',
                    'z@gmail.com'];
                for (var i=0;i                     if(val==emailTable[i])
                        return;
                ctrl.$setValidity('emailAvailable', true);
                return val;
            })
        }
    }
})

Input元素中加上is-already-taken属性，并且再加一个ng-message:

代码如下:

Already taken! try other email addresses!



推荐阅读
  • css

    知识图谱——机器大脑中的知识库

    知识图谱——机器大脑中的知识库
    本文介绍了知识图谱在机器大脑中的应用，以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例，说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案，如搜索关键词"Marie Curie"，会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革，不仅美国的微软必应，中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
  • css

    OC学习笔记之@property和@synthesize

    本文介绍了OC学习笔记中的@property和@synthesize，包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]
  • css

    90后程序员的职业发展之路：从年薪3w到30w的经验分享

    本文是一位90后程序员分享的职业发展经验，从年薪3w到30w的薪资增长过程。文章回顾了自己的青春时光，包括与朋友一起玩DOTA的回忆，并附上了一段纪念DOTA青春的视频链接。作者还提到了一些与程序员相关的名词和团队，如Pis、蛛丝马迹、B神、LGD、EHOME等。通过分享自己的经验，作者希望能够给其他程序员提供一些职业发展的思路和启示。 ... [详细]
  • css

    HDU 2372 El Dorado（DP）的最长上升子序列长度求解方法

    HDU 2372 El Dorado（DP）的最长上升子序列长度求解方法
    本文介绍了解决HDU 2372 El Dorado问题的一种动态规划方法，通过循环k的方式求解最长上升子序列的长度。具体实现过程包括初始化dp数组、读取数列、计算最长上升子序列长度等步骤。 ... [详细]
  • css

    CSS3选择器的使用方法详解，提高Web开发效率和精准度

    CSS3选择器的使用方法详解，提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]
  • css

    Alink回归预测的不完善问题及期待

    本文讨论了Alink回归预测的不完善问题，指出目前主要针对Python做案例，对其他语言支持不足。同时介绍了pom.xml文件的基本结构和使用方法，以及Maven的相关知识。最后，对Alink回归预测的未来发展提出了期待。 ... [详细]
  • css

    求解hdu 1003 java题目的动态规划优化方法

    本文讨论了如何优化解决hdu 1003 java题目的动态规划方法，通过分析加法规则和最大和的性质，提出了一种优化的思路。具体方法是，当从1加到n为负时，即sum(1,n)sum(n,s)，可以继续加法计算。同时，还考虑了两种特殊情况：都是负数的情况和有0的情况。最后，通过使用Scanner类来获取输入数据。 ... [详细]
  • css

    C#之数据集：DataSet对象的使用及相关方法详解

    本文介绍了C#中数据集DataSet对象的使用及相关方法详解，包括DataSet对象的概述、与数据关系对象的互联、Rows集合和Columns集合的组成，以及DataSet对象常用的方法之一——Merge方法的使用。通过本文的阅读，读者可以了解到DataSet对象在C#中的重要性和使用方法。 ... [详细]
  • css

    Mac OS 升级到11.2.2 Eclipse打不开了，报错Failed to create the Java Virtual Machine

    Mac OS 升级到11.2.2 Eclipse打不开了，报错Failed to create the Java Virtual Machine
    本文介绍了在Mac OS升级到11.2.2版本后，使用Eclipse打开时出现报错Failed to create the Java Virtual Machine的问题，并提供了解决方法。 ... [详细]
  • css

    Hibernate基础映射

    在说Hibernate映射前，我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象，以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]
  • css

    SpringBoot集成前端模版（thymeleaf）的配置步骤

    本文介绍了在SpringBoot中集成thymeleaf前端模版的配置步骤，包括在application.properties配置文件中添加thymeleaf的配置信息，引入thymeleaf的jar包，以及创建PageController并添加index方法。 ... [详细]
  • css

    测试人的性格，点火让他着急，考验婚姻问题的善意玩人

    本文讲述了作者通过点火测试男友的性格和承受能力，以考验婚姻问题。作者故意不安慰男友并再次点火，观察他的反应。这个行为是善意的玩人，旨在了解男友的性格和避免婚姻问题。 ... [详细]
  • css

    CSS标签、类名和ID选择器的使用区别

    CSS标签、类名和ID选择器的使用区别
    本文讲解了CSS中标签选择器、类名选择器和ID选择器的使用区别，主要包括加空格和不加空格的区别。通过示例代码，说明了加空格表示选择当前节点的后代节点，而不加空格表示一个元素的多个类名不能加空格的规则。 ... [详细]
  • 上传

    AJAX操作授权过期的全局处理方式

    本文介绍了一种处理AJAX操作授权过期的全局方式，以解决Asp.net MVC中Session过期异常的问题。同时还介绍了基于WebImage的图片上传工具类。详细内容请参考链接：https://www.cnblogs.com/starluck/p/8284949.html ... [详细]
  • 上传

    MySQL中的MVVC多版本并发控制机制的应用及实现

    MySQL中的MVVC多版本并发控制机制的应用及实现
    本文介绍了MySQL中MVCC的应用及实现机制。MVCC是一种提高并发性能的技术，通过对事务内读取的内存进行处理，避免写操作堵塞读操作的并发问题。与其他数据库系统的MVCC实现机制不尽相同，MySQL的MVCC是在undolog中实现的。通过undolog可以找回数据的历史版本，提供给用户读取或在回滚时覆盖数据页上的数据。MySQL的大多数事务型存储引擎都实现了MVCC，但各自的实现机制有所不同。 ... [详细]
author-avatar
手机用户2502917001
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有