AngularJS 输入验证详解及实例代码

thesameguo 2019-04-26

AngularJS 输入验证

AngularJS 表单和控件可以验证输入的数据。

输入验证

在前面的几个章节中，你已经学到关于 AngularJS 表单和控件的知识。

AngularJS 表单和控件可以提供验证功能，并对用户输入的非法数据进行警告。

注意： 客户端的验证不能确保用户输入数据的安全，所以服务端的数据验证也是必须的。

应用代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<h2>验证实例</h2>

<form ng-app="myApp" ng-controller="validateCtrl" 
name="myForm" novalidate>

<p>用户名:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">用户名是必须的。</span>
</span>
</p>

<p>邮箱:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">邮箱是必须的。</span>
<span ng-show="myForm.email.$error.email">非法的邮箱地址。</span>
</span>
</p>

<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid || 
myForm.email.$dirty && myForm.email.$invalid">
</p>

</form>

<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
 $scope.user = 'John Doe';
 $scope.email = '[email protected]';
});
</script>

</body>
</html>

运行结果：

 验证实例

用户名:

邮箱:

注意： HTML 表单属性 novalidate 用于禁用浏览器默认的验证。

实例解析

AngularJS ng-model 指令用于绑定输入元素到模型中。

模型对象有两个属性： user 和 email。

我们使用了 ng-show指令， color:red 在邮件是 $dirty 或 $invalid 才显示。

 

属性 描述
$dirty 表单有填写记录
$valid 字段内容合法的
$invalid 字段内容是非法的
$pristine 表单没有填写记录

 以上就是对AngularJS 输入验证的资料整理，后续继续补充，希望能帮助学习的同学。

thesameguo

thesameguo

相关推荐

AngularJs 指令directive之require

controller的用法分为两种情形，一种是require自定义的controller，由于自定义controller中的属性方法都由自己编 写，使用起来比较简单；另一种方法则是require AngularJS内建的指令，其中大部分时间需要requir

youyouzouzou / 0评论 2014-05-30

AngularJS自定义表单验证功能实例详解

本文实例讲述了AngularJS自定义表单验证功能。分享给大家供大家参考，具体如下：。Angular实现了大部分常用的HTML5的表单控件的类型，也实现了很多指令做为验证。为了取得这个controller对象，我们需要requirengModel指令。在$

雅特岚蒂斯 / 0评论 2018-08-24

Angularjs问题总结

在使用Angularjs做验证的时候使用jquery或者其他方式直接给input赋值不能通过Angularjs的验证，报错如下Error: [ng:areq] Argument 'brandController' is not a function, go

youyouzouzou / 0评论 2015-08-24

AngularJS表单验证实现方法详解

本文主要是通过源码实例和大家分享AngularJS中的表单验证相关知识，希望通过本文的分享，对大家学习AngularJS有所帮助。<label>编号</label><input type="text" na

SakuraLu / 0评论 2016-11-25

angular常用指令

ng-app 指令定义一个 AngularJS 应用程序的根元素，一个网页可以包含多个运行在不同元素中的 AngularJS 应用程序，在网页加载完毕时会自动引导应用程序。ng-init 指令初始化AngularJS应用程序变量，为应用程序定义了初始值．通

SakuraLu / 0评论 2017-05-11

ionic使用angularjs表单验证（模板验证）

顾名思义模板验证就是通过一些angularjs的属性来在html标签中验证，为了往模板驱动表单中添加验证机制，你要添加一些验证属性，就像原生的 HTML 表单验证器。Angular 会用指令来匹配这些具有验证功能的指令。每当表单控件中的值发生变化时，Ang

GoDotDotDot / 0评论 2018-12-12

ionic使用angularjs表单验证（模板验证）

1什么是模板验证顾名思义模板验证就是通过一些angularjs的属性来在html标签中验证，为了往模板驱动表单中添加验证机制，你要添加一些验证属性，就像原生的 HTML 表单验证器。Angular 会用指令来匹配这些具有验证功能的指令。每当表单控件中的值发

samllcat / 0评论 2019-06-29

【AngularJS 介绍】

AngularJS 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签

princejingyun / 0评论 2017-07-30

使用AngularJS进行表单验证

<input type="text" name="userName" placeHolder="名称" ng-minlength="3"

youyouzouzou / 0评论 2016-12-01

AngularJS表单验证实现方法详解

本文主要是通过源码实例和大家分享AngularJS中的表单验证相关知识，希望通过本文的分享，对大家学习AngularJS有所帮助。<label>编号</label><input type="text" na

princejingyun / 0评论 2016-11-25

AngularJS简介

AngularJS是一个JavaScript矿建，他是一个JavaSscript编写的库。可以通过<script>标签添加到HTML页面。AngularJS是通过指令扩展了HTML，且通过表达式绑定数据到HTML。ng-app指令定义一个Ang

CrazyDogWang / 0评论 2016-08-31

angularJS表单验证

<input type="text" class="form-controls" name="name" ng-model="volumeForm.name" plac

youyouzouzou / 0评论 2016-05-18

angularJS基础学习笔记

类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。template : "<h1>自定义指令!--t

CrazyDogWang / 0评论 2016-04-12

在AngularJS应用中处理单选框和复选框

AngularJS对表单的处理相当简单。在AngularJS使用双向数据绑定方式进行表单验证的时候，实质上它在帮我们进行表单处理。今天，我们将快速浏览一下AngularJS是如何对表单中的复选框和单选按钮进行处理的。在这篇文章里，我们需要两个文件：inde

zbwroom / 0评论 2015-12-11

Angularjs问题总结

在使用Angularjs做验证的时候使用jquery或者其他方式直接给input赋值不能通过Angularjs的验证，scope.logoPath=data.result.path;2.使用requirejs与Angularjs整合加载顺序导致找不到Ang

princejingyun / 0评论 2015-08-24

博弈AngularJS讲义(1) - 快速开始

通过AngularJS可以扩展HTML的语法，让页面显得更加简洁。由于国内访问Google Site受限，所以广大的爱好者可能无法访问到最好的AngularJS资源，我们将在稍后的章节中结合大量的官方代码片段对AngularJS进行详解，尽显其强大之处。A

zbwroom / 0评论 2014-11-24

AngularJs 指令directive之require

controller的用法分为两种情形，一种是require自定义的controller，由于自定义controller中的属性方法都由自己编 写，使用起来比较简单；另一种方法则是require AngularJS内建的指令，其中大部分时间需要requir

zhenghao / 0评论 2014-05-30

AngularJs 入门（一）--前言

AngularJs 入门（一）前言AngularJs目前来说相对于现在流行的高版本ng2、ng4,以及Vue2.0、React来说实属是老套的前端框架了，当然这都不重要，没有完美的框架，只有不断优化的代码。其实只是符合公司水平要求才这么整的啊。。话不多说，

SakuraLu / 0评论 2019-06-26

Angular开发者指南（一）入门介绍

什么是AngularAngularJS是动态Web应用程序的结构框架。它允许您使用HTML作为模板语言，并允许您扩展HTML的语法以清晰，简洁地表达应用程序的组件。AngularJS的数据绑定和依赖注入消除了许多你不得不编写的代码。这一切都发生在浏览器中，

kkkder / 0评论 2019-06-21

AngularJS表单验证

表单网页中用户于服务端交互数据的表单控件有input、select、textarea，而表单是将为了达到一个目的各种控件整合到一起的一个集合。表单和其中的表单控件提供了验证服务，可以让用户在提交表单前意识到自己有非法的输入。但是虽然说客户端验证提供了更好的

Oranq / 0评论 2019-06-20

AngularJS表单验证功能

能够根据用户在表单中输入的内容给出实时视觉反馈是非常重要的。在人与人沟通的语境中，表单验证给出来的反馈同获得正确输入同等重要。表单验证不仅能给用户提供有用的反馈，同时也能保护我们的Web应用不会被恶意或者错误的输入所破坏。我们要在Web前端尽力保护后端。A

cjwjyooo / 0评论 2017-10-19

AngularJS实现表单验证功能详解

ng-valid 表单通过验证时设置 ng-invalid 表单未通过验证时设置 ng-pristine 表单没有改动时设置 ng-dirty 表单有改动时设置。<span ng-show="myForm.t_age.$pristine&q

wssssg / 0评论 2017-10-12

基于AngularJS实现表单验证功能

ng-controller 指令定义了应用控制器。ng-model 指令绑定了两个 input 元素到模型的 user 对象。formCtrl 函数设置了 master 对象的初始值，并定义了 reset() 方法。ng-click 指令调用了 reset

闲听风月 / 0评论 2017-07-28

使用AngularJS对表单提交内容进行验证的操作方法

AngularJS是一款优秀的前端JS框架，已经被用于Google的多款产品当中。它有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等……使用它可以大大减少书写代码的工作量，但和Jquery不同，使用AngularJS有

闲听风月 / 0评论 2017-07-12

AugularJS从入门到实践(必看篇)

AngularJS是为了克服HTML在构建应用上的不足而设计的。AngularJS使用了不同的方法，它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为指令的结构，让浏览器能够识别新的语法。本篇学习主要有两个部分：① ②　

itseebin / 0评论 2019-05-05

AngularJS表单验证功能分析

本文实例讲述了AngularJS表单验证功能。分享给大家供大家参考，具体如下：。在AngularJS的管辖下，每个表单form都会创建一个ngFormController的一个实例。在表单里面的每个input都会创建一个在这个实例下的ngModelCont

itseebin / 0评论 2017-05-26

Angularjs使用指令做表单校验的方法

通常，使用angular做表单验证，一般都是把验证规则单独写为service，然后通过依赖注入的方式调用。在个别情况下，例如用户注册表单，需要根据用户输入给出不同提示信息，使用service略显不合适宜，所以可以采用指令的方式。如下为一个简易表单，有四项提

飞鹰 / 0评论 2017-03-31

Angular开发者指南之入门介绍

AngularJS是动态Web应用程序的结构框架。它允许您使用HTML作为模板语言，并允许您扩展HTML的语法以清晰，简洁地表达应用程序的组件。AngularJS的数据绑定和依赖注入消除了许多你不得不编写的代码。这一切都发生在浏览器中，使其成为任何服务器技

forthemyth / 0评论 2017-03-05

AngularJS表单提交实例详解

本文实例讲述了AngularJS表单提交。分享给大家供大家参考，具体如下：。AngularJS创建实时模板来代替视图，而不是将数据合并进模板之后更新DOM。任何一个独立视图组件中的值都是动态替换的。只有被具有ng-app属性的DOM元素包含的元素才会受An

howtoseegoodbye / 0评论 2017-02-18

AngularJS实现表单验证功能

-- ng-show:类似avalon的ms-if的用法，如果校验不通过则返回true,显示提示内容，数据校验不太精确 -->. -- required标识不能为空，否则不合法 -->. -- 通过识别表单的email控件按照默认的规则进行校验

wssssg / 0评论 2017-01-09

详解AngularJS验证、过滤器、指令

angularJS中提供了许多的验证指令，可以轻松的实现验证，只需要在表单元素上添加相应的ng属性，常见的如下所示：。<input Type="text" ng-model="" [name="&qu

itseebin / 0评论 2017-01-04

理解AngularJs篇：30分钟快速掌握AngularJs

对于前端系列，自然少不了AngularJs的介绍了。在前面文章中，我们介绍了如何使用KnockoutJs来打造一个单页面程序，后面一篇文章将介绍如何使用AngularJs的开发一个单页面应用程序。在开始使用AngularJs开发SPA之前，我觉得有必要详细

学而思之 / 0评论 2016-12-23

AngularJs表单验证实例代码解析

验证表单输入的文本长度是否大于某个最小值，在输入字段上使用指令ng-minleng= "{number}"：。<input type="text" ng-pattern="/[a-zA-Z]/&quo

forthemyth / 0评论 2016-11-29

AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】

本文实例讲述了AngularJS验证信息框架的封装插件用法。分享给大家供大家参考，具体如下：。angular.js 的表单验证规则有 required(必填项)，type="number"，type="email"，

codergirl / 0评论 2016-11-03

AngularJS表单和输入验证实例

AngularJS 表单和控件可以提供验证功能，并对用户输入的非法数据进行警告。以下 HTML input 元素被称为 HTML 控件:input 元素、select 元素、button 元素、textarea 元素。HTML 表单通常与 HTML 控件同

codergirl / 0评论 2016-11-02

AngularJS入门教程之表单校验用法示例

本文实例讲述了AngularJS表单校验用法。分享给大家供大家参考，具体如下：。如果对HTTP协议比较熟，甚至还可以在程序中手动构造一段HTTP请求发到服务器，所以服务器端的数据校验绝对是必不可少的。使用AngularJS对表单元素进行校验是相当方便的，我

苏生苏米沿 / 0评论 2016-11-02

angularjs 表单密码验证自定义指令实现代码

<input type="password" name="password" ng-model="password" required placeholder="请输入密码&quo

Inuyasha / 0评论 2019-04-29

Angularjs 创建可复用组件实例代码

AngularJS框架可以用Service和Directive降低开发复杂性。这个特性非常适合用于分离代码，创建可测试组件，然后将它们变成可重用组件。Directive是一组独立的JavaScript、HTML和CSS，它们封装了一个特定的行为，它将成为将

Inuyasha / 0评论 2019-04-29

AngularJS表单验证中级篇（3）

</form>以上展示了基本的ng验证.ng-maxlength: 如果不写ng,maxlength则直接限制最多输入字符,稍微有点区别。ng-pattern:通过正则验证,如果不写ng开头,无验证效果.---访问一个输入框: <form

飞鹰 / 0评论 2016-09-28

AngularJs Forms详解及简单示例

控件是用户输入数据的一种方式。Form（表单）是这些控件的集合，目的是将相关的控件进行分组。表单和控件提供了验证服务，所以用户可以收到无效输入的提示。这提供了更好的用户体验，因为用户可以立即获取到反馈，知道如何修正错误。请记住，虽然客户端验证在提供良好的用

飞鹰 / 0评论 2016-09-01

AngularJS表单详解及示例代码

AngularJS提供可与HTML控件相关联的多个事件。例如ng-click通常与按钮相关联。使用点击一个按钮的指令，表单重置数据。可使用下面跟踪误差。$dirty - 规定值已被改变。$invalid- 该值的状态是无效的。$error- 指出确切的错误

forthemyth / 0评论 2016-08-17

AngularJS基础 ng-model-options 指令简单示例

<p>该实例演示了如何使用 ng-model-options 指令绑定在失去焦点时输入框的值到 scope 变量中。<input>, <select>, <textarea>, 元素支持该指令。值

wssssg / 0评论 2019-04-26

AngularJS开发指南6：AngularJS表单详解

表单控件是用来获取用户输入的。表单则是一组有联系的表单控件的集合。用户能通过表单和表单控件提供验证的服务，知道自己的输入是否合法。这样能让用户交互变得友好，因为用户能通过反馈来修正自己的错误。要建立安全的应用，服务器端验证还是必不可少的。了解Angular

Frankywls / 0评论 2015-01-29

AngularJS开发指南1：AngularJS简介

AngularJS 是一个为动态WEB应用设计的结构框架。它能让你使用HTML作为模板语言，通过扩展HTML的语法，让你能更清楚、简洁地构建你的应用组件。它的创新点在于，利用 数据绑定 和 依赖注入，它使你不用再写大量的代码了。AngularJS是为了克服

Frankywls / 0评论 2015-01-29

AngularJs表单验证实例详解

验证表单输入的文本长度是否大于某个最小值，在输入字段上使用指令ng-minleng= "{number}"：。<input type="text" ng-pattern="/[a-zA-Z]/&quo

howtoseegoodbye / 0评论 2016-05-30

AngularJS手动表单验证

所谓手动验证是通过AngularJS表单的属性来验证，而成为AngularJS表单必须满足两个条件：。--theForm变成scope的一个字段-->. theForm.$pristine || theForm.$submitted)"&g

学而思之 / 0评论 2019-04-25

AngularJS使用angular-formly进行表单验证

当验证表单中有很多字段时，这时候可能希望把html的生成以及验证逻辑放到controller中，在页面，也许是这样的：。<some-form fiedls="vm.someFields" ...></some-form

howtoseegoodbye / 0评论 2015-12-27

AngularJS实现表单手动验证和表单自动验证

AngularJS的表单验证大致有两种，一种是手动验证，一种是自动验证。而成为AngularJS表单必须满足两个条件：。--theForm变成scope的一个字段-->. theForm.$pristine || theForm.$submitted

wssssg / 0评论 2019-04-23

使用AngularJS处理单选框和复选框的简单方法

AngularJS对表单的处理相当简单。在AngularJS使用双向数据绑定方式进行表单验证的时候，实质上它在帮我们进行表单处理。使用复选框的的例子有很多，同时我们对它们的处理方式也有很多。这篇文章中我们将看一看把复选框和单选按钮同数据变量绑定的方法和我们

wssssg / 0评论 2019-04-21