搜索
首页web前端js教程AngularJS实现表单验证_AngularJS

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

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

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

首先从下面这段代码开始

复制代码 代码如下:


   

Email:
       
       
            Email is required.
            Invalid email address.
       

   


   


       
   



<script><br /> angular.module('myApp',[])<br /> .controller('validationController', ['$scope',function($scope) {<br /> $scope.user = 'Kavlez';<br /> $scope.email = <a href="mailto:'sweet_dreams@aliyun.com'">'sweet_dreams@aliyun.com';<br /> }]);<br /> </script>

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()? 后面的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 />
       


       

   
   


       
   



并不复杂,我们再加点东西。
为了让提示更友好(?)一些,我们试试实现光标离开后出现提示的效果。
这时候用指令(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!


声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
php如何使用CodeIgniter4框架?php如何使用CodeIgniter4框架?May 31, 2023 pm 02:51 PM

PHP是一种非常流行的编程语言,而CodeIgniter4是一种常用的PHP框架。在开发Web应用程序时,使用框架是非常有帮助的,它可以加速开发过程、提高代码质量、降低维护成本。本文将介绍如何使用CodeIgniter4框架。安装CodeIgniter4框架CodeIgniter4框架可以从官方网站(https://codeigniter.com/)下载。下

Laravel开发:如何使用Laravel Validation验证表单请求?Laravel开发:如何使用Laravel Validation验证表单请求?Jun 13, 2023 pm 01:34 PM

Laravel是一个流行的PHPWeb开发框架,它提供了很多方便的功能来加快开发者的工作。其中,LaravelValidation是一种非常实用的功能,它可以帮助我们轻松地验证表单请求和用户输入的数据。本文就将介绍如何使用LaravelValidation验证表单请求。什么是LaravelValidationLaravelValidation是La

如何使用Golang实现Web应用程序的表单验证如何使用Golang实现Web应用程序的表单验证Jun 24, 2023 am 09:08 AM

表单验证是Web应用程序开发中非常重要的一个环节,它能够在提交表单数据之前对数据进行有效性检查,避免应用程序出现安全漏洞和数据错误。使用Golang可以轻松地实现Web应用程序的表单验证,本文将介绍如何使用Golang来实现Web应用程序的表单验证。一、表单验证的基本要素在介绍如何实现表单验证之前,我们需要知道表单验证的基本要素是什么。表单元素:表单元素是指

2022年最新5款的angularjs教程从入门到精通2022年最新5款的angularjs教程从入门到精通Jun 15, 2017 pm 05:50 PM

Javascript 是一个非常有个性的语言. 无论是从代码的组织, 还是代码的编程范式, 还是面向对象理论都独具一格. 而很早就在争论的Javascript 是不是面向对象语言这个问题, 显然已有答案. 但是, 即使 Javascript 叱咤风云二十年, 如果想要看懂 jQuery, Angularjs, 甚至是 React 等流行框架, 观看《黑马云课堂JavaScript 高级框架设计视频教程》就对了。

PHP中的表单验证和过滤方法?PHP中的表单验证和过滤方法?Jun 29, 2023 pm 10:04 PM

PHP作为一种广泛应用于Web开发的脚本语言,其表单验证和过滤是非常重要的一部分。在用户提交表单的过程中,需要对用户输入的数据进行验证和过滤,以确保数据的安全性和有效性。本文将介绍PHP中如何进行表单验证和过滤的方法和技巧。一、表单验证表单验证是指对用户输入的数据进行检查,以确保数据符合特定的规则和要求。常见的表单验证包括对必填项的验证、邮箱格式、手机号码格

ThinkPHP6如何进行表单验证操作?ThinkPHP6如何进行表单验证操作?Jun 12, 2023 am 09:36 AM

ThinkPHP6是一款基于PHP的MVC框架,极大地简化了Web应用程序的开发。其中表单验证是一个非常基础和重要的功能。在这篇文章中,我们将介绍ThinkPHP6中如何进行表单验证操作。一、验证规则定义在ThinkPHP6中,验证规则都需要定义在控制器中,我们可以通过在控制器中定义一个$validate属性来实现规则的定义,如下所示:usethinkVa

使用PHP和AngularJS搭建一个响应式网站,提供优质的用户体验使用PHP和AngularJS搭建一个响应式网站,提供优质的用户体验Jun 27, 2023 pm 07:37 PM

在如今信息时代,网站已经成为人们获取信息和交流的重要工具。一个响应式的网站能够适应各种设备,为用户提供优质的体验,成为了现代网站开发的热点。本篇文章将介绍如何使用PHP和AngularJS搭建一个响应式网站,从而提供优质的用户体验。PHP介绍PHP是一种开源的服务器端编程语言,非常适用于Web开发。PHP具有很多优点,如易于学习、跨平台、丰富的工具库、开发效

Golang学习之Web应用程序的表单验证实践Golang学习之Web应用程序的表单验证实践Jun 24, 2023 pm 03:07 PM

在Web开发中,表单验证是一个极其关键的部分。表单验证可以有效地保护数据的安全性,防止非法用户的攻击和恶意操作。在Golang中,表单验证技术也应用广泛,特别是在Web应用程序中。本文将介绍Golang中Web应用程序的表单验证实践。一、表单验证的基本原理在Web应用程序中,表单验证的基本原理是在Web页面提交数据之前进行数据的检查和验证。这些数据可能是用户

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
1 个月前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境