通过AngularJS我们不仅可以隐藏/显示错误提示消息，高亮输入框，还可以通过编写指令来随心所欲的控制表单验证方式。
一.实例1
app.js
var myApp=angular.module('myModule', ['ui.bootstrap']);
myApp.controller('myCtrl',function($scope){
$scope.reset=function(){ //表单重置
$scope.user={account:'',email:''};
};
});
angular.element(document).ready(function() {
angular.bootstrap(document,['myModule']);
});
formValidation01.html
<html>
<head>
<title>表单验证</title>
<!--
<link href="lib/bootstrap-gh-pages/assets/bootstrap.css" rel="stylesheet" type="text/css" />
-->
<link rel="stylesheet" href="lib/bootstrap-3.0.0/css/bootstrap.css">
<style>
#css_form input.ng-invalid.ng-dirty {
background-color: #FFC0CB;
}
#css_form input.ng-valid.ng-dirty {
background-color: #78FA89;
}
</style>
</head>
<body>
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title">表单验证</div>
</div>
<div class="panel-body">
<div class="row">
<form id="css_form" class="form-horizontal" novalidate name="myform" role="form" ng-controller="myCtrl">
<div class="form-group">
<label for="inputAccount" class="col-md-2 control-label">账号：</label>
<div class="col-md-2">
<!--输入框 -->
<input type="number" ng-model="user.account" min="3" max="6" name="myAccount" required class="form-control" id="inputAccount" placeholder="请输入3-6的整数"/>
</div>
<!-- 隐藏块，显示验证信息-->
<div class="alert alert-danger well-sm" ng-show="myform.myAccount.$error.required">账号不能为空！</div>
<div class="alert alert-danger well-sm" ng-show="myform.myAccount.$error.min || myform.myAccount.$error.max">输入值必须在3-6之间!</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-md-2 control-label">邮箱：</label>
<div class="col-md-2">
<!--输入框 -->
<input type="email" ng-model="user.email" name="myEmail" required class="form-control" id="inputEmail" placeholder="请输入邮箱地址"/>
</div>
<!-- 隐藏块，显示验证信息-->
<div class="alert alert-danger well-sm" ng-show="myform.myEmail.$error.required">邮箱不能为空！</div>
<div class="alert alert-danger well-sm" ng-show="myform.myEmail.$error.email">邮箱格式不正确!</div>
</div>
<!--按钮组-->
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button class="btn btn-default" ng-disabled="!myform.$valid">提交</button>
<button class="btn btn-default" ng-click="reset()">重置</button>
</div>
</div>
</form>
</div>
</div>
</div>
<script type='text/javascript' src='lib/angular/angular.js'></script>
<script type='text/javascript' src='lib/bootstrap-gh-pages/ui-bootstrap-tpls-0.10.0.js'></script>
<script type='text/javascript' src='app.js'></script>
</body>
</html>
这里我们向module中注入了ui.bootstrap，这样就可以用angular-ui去做一些事情。
注意：就像上述代码所展示的，我需要预判断用户可能输入的错误类型，然后置于div中，通过ng-show的true/false来显示/隐藏。
这里出现了一个$error属性，你需要记住的就是$error对象包含了某个特定表单所有的验证信息以及表单是否合法。如果某个验证失败，则这个属性返回true,相反如果验证通过,则这个属性返回false。
运行效果：
二.实例2
app.js同实例1
formValidation02.html
<html>
<head>
<title>表单验证</title>
<link rel="stylesheet" href="lib/bootstrap-3.0.0/css/bootstrap.css">
<style>
#css_form input.ng-invalid.ng-dirty {
background-color: #FFC0CB;
}
#css_form input.ng-valid.ng-dirty {
background-color: #78FA89;
}
</style>
</head>
<body>
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title">表单验证</div>
</div>
<div class="panel-body">
<div class="row">
<form id="css_form" class="form-horizontal" novalidate name="myform" role="form" ng-controller="myCtrl">
<div class="form-group">
<label for="inputAccount" class="col-md-2 control-label">账号：</label>
<div class="col-md-2">
<!--输入框 -->
<input type="text" class="form-control" ng-model="user.account" ng-pattern="/^[0-9]{6}$/" name="myAccount" required id="inputAccount" placeholder="请输入6位的数字账号"/>
</div>
<div class="input-required"><font color="red">*</font></div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-md-2 control-label">邮箱：</label>
<div class="col-md-2">
<!--输入框 -->
<input type="email" ng-model="user.email" name="myEmail" required class="form-control" id="inputEmail" placeholder="请输入邮箱地址"/>
</div>
<div class="input-required"><font color="red">*</font></div>
</div>
<!--按钮组-->
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button class="btn btn-default" ng-disabled="!myform.$valid">提交</button>
<button class="btn btn-default" ng-click="reset()">重置</button>
</div>
</div>
</form>
</div>
</div>
</div>
<script type='text/javascript' src='lib/angular/angular.js'></script>
<script type='text/javascript' src='lib/bootstrap-gh-pages/ui-bootstrap-tpls-0.10.0.js'></script>
<script type='text/javascript' src='app.js'></script>
</body>
</html>
从上面代码可以看出，我在form中加了id="css_form"和name="myform"这两个属性，同时在提交按钮中添加了ng-disabled="!myform.$valid"。这就够了，剩下的angular全部为我们搞定了。
运行效果：
三.参数说明
①valid、invalid、pristine和dirty
valid标记表单元素有效；
invalid标记表单元素无效；
pristine表示表单元素是纯净的，用户未操作过；
dirty表示表单元素是已被用户操作过；
②更改css属性
.ng-pristine {}
.ng-dirty {}
.ng-valid {}
.ng-invalid {}
正如上面实例2所示，我可以预先定义表单验证的表现方式。当然，这些类名是不能更改的，我们只能去覆盖父类属性。
四.注意事项
①novalidate
标准浏览器如火狐，谷歌等对HTML5有很好的支持。众所周知，HTML5中input的type属性已经具备了验证功能。如果你要自己定义验证方式，那么请加上novalidate属性，以此避开浏览器自行验证。
②type类型
HTML5的type属性可以包含text、email、number等，但是angular又内部重写了这些属性，所以放心大胆的去用吧，angular完全可以满足你所有的验证。
③type="number"还是ng-pattern="/^[0-9]{6}$/"
你可以使用type="number"来限制输入框只能输入数字，当然你也可以用ng-pattern来验证用户输入，从而过滤掉非数字输入。这完全取决于你的爱好，没有硬性规定，只是选择多一些罢了。
参考文章：http://wangjiatao.diandian.com/post/2014-05-29/40061882427
相关推荐
AngularJS是前端开发流行框架，本Demo展示了表单验证的意义，及实现方法，掌握Angular基础指令，通过不同的指令元素可以拥有不同功能，并通过指令与表单合作验证，从而实现表单验证的敏捷化开发。
AngularJS表单验证可以让你从一开始就写出一个具有交互性和可相应的现代HTML5表单。在AngularJS中，有许多表单验证指令。在这里，我们将谈谈几个最流行指令，然后我们将讨论如何编写自定义的验证。
首先，了解AngularJS表单验证的基础是理解ngFormController和ngModelController的作用。在AngularJS中，每个表单元素都会关联到一个ngFormController实例，而每个输入元素（例如input, select, textarea等）都会关联...
自定义验证功能也是AngularJS表单验证中一个很重要的部分。虽然文章没有给出自定义验证的代码示例，但自定义验证通常包括创建一个自定义指令，然后在这个指令中注入表单控制器（`formController`）或者控件控制器（`...
**AngularJS 表单验证详解** AngularJS 是一个强大的前端JavaScript框架，主要用于构建动态Web应用。在AngularJS中，表单验证是一个至关重要的部分，它能够帮助开发者在用户提交数据之前进行实时验证，提高用户体验...
本文将深入探讨AngularJS表单验证的实例和常见验证指令。 1. **必填项验证**：通过在HTML5的输入字段上添加`required`属性，可以检查用户是否填写了该字段。例如： ```html ``` 如果用户未填写此字段，表单将...
提供的压缩包文件可能包含一个Eclipse工程，方便开发者在IDE中编辑和运行代码，同时也可以直接在浏览器中查看运行结果，这对于学习和调试AngularJS表单验证功能非常有用。 通过学习和实践这些知识点，你将能够熟练...
AngularJS表单验证 演示版 ＃目录 要求 jQuery的 AngularJS 浏览器支持 Chrome合金 火狐浏览器 快速配置 bower install sanji-validator 这会将bower_components -validator文件及其依赖项复制到bower_...
AngularJS中的表单验证是前端开发中的一项核心功能，它确保了用户输入的数据准确性和安全性。在AngularJS框架中，表单验证功能不仅包含了HTML5的原生表单验证属性，而且还提供了一系列自定义的验证指令，以满足复杂...
在本篇文章中，我们主要探讨了如何在AngularJS框架中对一个表单中的手机号输入进行验证，并且这个手机...通过学习和实践这些知识点，开发者可以更好地掌握AngularJS表单验证的技巧，并能够将其应用到实际开发项目中去。
当涉及到使用Ionic框架和AngularJS技术栈时，模板验证成为了实现表单验证的一种便捷方式。模板验证指的是直接在HTML模板中使用AngularJS内置的属性和指令来对用户输入进行验证。 在AngularJS中，模板验证主要依赖于...
AngularJS表单可以使用HTML原生的表单和控件，比如`<input>`、`<select>`、`<button>`和`<textarea>`等元素。AngularJS通过`ng-app`指令指定应用的范围，`ng-controller`用于指定视图对应的控制器，而`ng-model`则...
使用angularJS完成表单验证功能
开始学习AngularJS表单验证： 常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写，只要在输入字段元素上添加HTML5标记required即可： 复制代码 代码如下:<<input type=”text” required /> 2....
angularjs 表单验证指令。 应用程序包含下一个验证指令： “货币” - “12.34”格式 “时间”-“12:34”格式 “整数” - 只有数字 "password = '{{length}}'" - 数字、大小写字母、长度 基于引导程序 3. 运行 $ ...