通过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表单验证功能。分享给大家供大家参考，具体如下： 在AngularJS的管辖下，每个表单form都会创建一个ngFormController的一个实例。在表单里面的每个input都会创建一个在这个实例下的...
能够验证用户在表单中输入的内容是否合理与正确是十分重要的，这篇文章主要介绍了ionic使用angularjs表单验证（模板验证），具有一定的参考价值，感兴趣的小伙伴们可以参考一下
主要为大家详细介绍了AngularJS表单验证功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
AngularJS表单验证 演示版 ＃目录 要求 jQuery的 AngularJS 浏览器支持 Chrome合金 火狐浏览器 快速配置 bower install sanji-validator 这会将bower_components -validator文件及其依赖项复制到bower_...
主要为大家详细介绍了AngularJS表单验证,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
漂亮大气的bootstrap表单,angularJs表单验证 ，是angularJs入门很好的例子
ng验证器 AngularJS 表单验证器
主要介绍了AngularJs表单验证实例代码解析,非常不错，具有参考借鉴价值，需要的朋友可以参考下
使用angularJS完成表单验证功能
开始学习AngularJS表单验证： 常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写，只要在输入字段元素上添加HTML5标记required即可： 复制代码 代码如下:<<input type=”text” required /> 2....
angularjs 表单验证指令。 应用程序包含下一个验证指令： “货币” - “12.34”格式 “时间”-“12:34”格式 “整数” - 只有数字 "password = '{{length}}'" - 数字、大小写字母、长度 基于引导程序 3. 运行 $ ...
主要介绍了用AngularJs验证表单实例详解的相关资料,需要的朋友可以参考下
下面小编就为大家带来一篇AngularJS 表单验证手机号的实例(非必填)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧