通过AngularJS我们不仅可以隐藏/显示错误提示消息，高亮输入框，还可以通过编写指令来随心所欲的控制表单验证方式。
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
&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&&
#css_form input.ng-invalid.ng-dirty {
background-color: #FFC0CB;
#css_form input.ng-valid.ng-dirty {
background-color: #78FA89;
&body ng-controller=&myCtrl&&
&div class=&panel panel-primary&&
&div class=&panel-heading&&
&div class=&panel-title&&表单验证&/div&
&div class=&panel-body&&
&div class=&row&&
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 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 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 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 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&
&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&
这里我们向module中注入了ui.bootstrap，这样就可以用angular-ui去做一些事情。
注意：就像上述代码所展示的，我需要预判断用户可能输入的错误类型，然后置于div中，通过ng-show的true/false来显示/隐藏。
这里出现了一个$error属性，你需要记住的就是$error对象包含了某个特定表单所有的验证信息以及表单是否合法。如果某个验证失败，则这个属性返回true,相反如果验证通过,则这个属性返回false。
运行效果：
app.js同实例1
formValidation02.html
&title&表单验证&/title&
&link rel=&stylesheet& href=&lib/bootstrap-3.0.0/css/bootstrap.css&&
#css_form input.ng-invalid.ng-dirty {
background-color: #FFC0CB;
#css_form input.ng-valid.ng-dirty {
background-color: #78FA89;
&div class=&panel panel-primary&&
&div class=&panel-heading&&
&div class=&panel-title&&表单验证&/div&
&div class=&panel-body&&
&div class=&row&&
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 class=&input-required&&&font color=&red&&*&/font&&/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 class=&input-required&&&font color=&red&&*&/font&&/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&
&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&
从上面代码可以看出，我在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来验证用户输入，从而过滤掉非数字输入。这完全取决于你的爱好，没有硬性规定，只是选择多一些罢了。
参考文章：
本文附件下载:
相关 [angularjs] 推荐：
- JavaScript - Web前端 - ITeye博客
通过AngularJS我们不仅可以隐藏/显示错误提示消息，高亮输入框，还可以通过编写指令来随心所欲的控制表单验证方式. $scope.reset=function(){ //表单重置. &title&表单验证&/title&. &div class=&panel-title&&表单验证&/div&. &label for=&inputAccount& class=&col-md-2 control-label&&账号：&/label&. &!--输入框 --&.
- Web前端 - ITeye博客
怎么样快速学习AngularJS. 相信很多初学者都有过或者类似的疑问，其实这个问题没有标准的答案，每个人的技术背景、工作经验等等都不经相同，所以学习AngularJS的切入点肯定也就不同，我之前初略使用过knockoutjs，当我第一眼看到AngularJS的Helloworld案例后，顿时就被声明式的语法和强大的双向绑定特性所吸引. 其实AngularJS的官方网站首页的几个例子已经很好的展示了AngularJS的一些特性，下面我就从几个例子一步一步的讲解AngularJS吸引人的东西并且实际项目中是怎么使用ng的. 首先还是从第一个经典的Hello world 案例说起，如下HTML（如果你在墙外，可以直接访问.
- ITeye博客
使用AngularJS非常简单，如下：. 以指令ng-app定义AngularJS的作用域，然后引入angular-1.0.1.min.js，这就是AngularJS的Hello World，简单但是无用. HTML执行表达式（Expressions）. AngularJS允许在HTML直接执行表达式，如下：. #页面会显示 1+2 = 3. 一样的简单，同样的无用，因为在HTML直接写表达式会让代码一团糟，这样的功能最好不要用. Directives（指令）. 这个特性非常有用，这个特性扩展HTML的表现能力，通过为DOM对象增加新的属性指令为DOM对象定制行为. 使用这个特性可以以更少的代码构建更加优雅的页面结构.
- CSDN博客Web前端推荐文章
真正的应用需要和真实的服务器进行交互，移动应用和新兴的Chrome桌面应用可能是个例外，但是对于此外的所有应用来说，无论你是想把数据持久化到云端，还是需要与其他用户进行实时交互，都需要让应用与服务器进行交互. 为了实现这一点，Angular提供了一个叫做$http的服务. 它提供了一个可扩展的抽象方法列表，使得与服务器的交互更加容易. 它支持HTTP、JSONP和CORS方式. 它还包含了安全性支持，避免JSON格式的脆弱性和XSRF. 它让你可以轻松地转换请求和响应数据，甚至还实现了简单的缓存. 例如，我们打算让购物站点从服务器上获取商品信息，而不是从内存假数据获取. 如何编写服务端代码已经超越了本书的范畴，所以，我们仅仅来想象一下，比方说我们已经创建了一个服务器，当查询/products 路径时，它会以JSON格式返回一个商品列表.
- JavaScript - Web前端 - ITeye博客
对于AJAX应用（使用XMLHttpRequests）来说，向服务器发起请求的传统方式是：获取一个XMLHttpRequest对象的引用、发起请求、读取响应、检查状态码，最后处理服务端的响应. }else if(xmlhttp.status == 400) { //或者可以是任何以4开头的状态码. }
//建立连接
xmlhttp.open(&GET&, &http://myserver/api&, true);
//发起请求
xmlhttp.send();.
对于简单、常用而且会经常重复的任务来说，这是一种很烦琐的工作.
- InfoQ cn
AngularJS是由Google创建的一种JS框架，使用它可以扩展应用程序中的HTML词汇，从而在web应用程序中使用HTML声明动态内容. 在该团队工作的软件工程师
Brian Ford近日撰写了一篇
blog，分享了如何使用AngularJS构建大型Web应用的经验. 这些经验对于使用其他JS框架构建大型应用的开发者也极具借鉴意义. AngularJS的官方网站上给出了这个框架的基本使用方法，如：. 如何引入AugularJS，从而让你的web应用使用该框架. 如何添加控件，并对其进行数据绑定. 如何让应用可嵌入、可注入和可测试. 另外，网站上还给出了
一系列教程，跟随这些内容，我们可以从深入浅出地逐渐对AngularJS的各种特性和用法有很好的了解，进而很好地开始使用这一框架.
- 四火的唠叨
AngularJS还真有点碰巧，在用JQuery写数据绑定的时候，我被数据对象和DOM之间的同步整烦了，要写一大堆方法绑定和取值/设值的代码逻辑，丑得要死. 数据对象发生变更以后，要及时更新DOM树；. 用户操作改变DOM树以后，要回头更新数据对象. 这个问题还是举例来说清楚一些，比如我定义了这样一个queryObj：. 1、queryObj发生变化的时候，这两个DOM对象要及时更新，一个是value需要更新，一个则是标签里面的文本需要更新. 我就得写这样的JQuery设值语句：. 2、当用户操作改变input里面的值的时候，我也需要同步更新label里面的值，以及queryObj里面的值：.
- JavaScript - Web前端 - ITeye博客
如果你要让你的AngularJS应用兼容IE8和IE8以下的版本的话，你需要做一些特殊处理. 要让你的AngularJS应用在IE中正常运行你必须：.
a.确保JSON字符串能被正常解析（IE7需要），你可以使用JSON2或者JSON3来实现.
b.不能使用自定义的元素标签，如&ng:view&（你只能使用属性的形式，如&div ng-view&）.
c.如果你用了自定义的标签名，那你必须按照以下步骤做才能保证IE正常运行：.
其中重要的部分是:.
xmlns:ng：命名空间，你需要为你使用或者准备使用的每一个自定义标签准备一个命名空间.
- Web前端 - ITeye博客
如果你不熟悉什么是Angular.js的话，小编我强烈推荐你阅读 Javascript教程：AngularJS的五个超酷特性. 简单来说Angular.js是google开发者设计和开发的一套前端开发框架，帮助你简化前端开发的负担. 当然，这里有很多其它的前端开发框架，但是如何选择合适的前端框架对于我们这些开发人员来说就不是那么容易了. 在今天的这篇文章中，我们将介绍三个你应该使用Angular.js的重要原因，希望大家觉得有帮助. 原因一：Google开发的框架. 要知道开源界的很多框架都是开发人员由于个人兴趣或者激情而开发出来的，比如，Cappucino 还有 Knockout. 而anguar.js是由互联网巨人Google组织开发的.
- 知乎每日精选
最近做的某个项目的 UI 部分
Mobile Campus
（Google Drive 可能需要跨墙）. 代码： /morlay/angular-mobile-ui. ## DOM 的整体 or 零散. AngularJS 与 jQuery 等传统操作 DOM 的思想有所不同，. 对于 jQuery 等，一般是先有完整 DOM 然后在这些 DOM 的基础上进行二次调教. 而 AngularJS
等框架则是 根据 数据模型 以及其对应的 DOM 模版，然后通过模版像搭积木那样组合页面. 显然的，前者在 SEO 上有天然优势；而后者，搜索引擎还只能拿到某个模版，而无内容.
坚持分享优质有趣的原创文章，并保留作者信息和版权声明，任何问题请联系：@。大家帮我看看为什么这段JS不跳转到Servlet
[问题点数：50分，结帖人mini_touchman]
大家帮我看看为什么这段JS不跳转到Servlet
[问题点数：50分，结帖人mini_touchman]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
相关帖子推荐：
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。简洁强大的JavaScript表单验证程序排行榜单列表
相关排行榜
Copyright @ 2007-. Corporation, All Rights ReservedJS 表单验证，怎么不提交_百度知道
JS 表单验证，怎么不提交
post&aa&quot.asp&form&aa&form action=&& name=&Co; name=& & method=&submit&/提交& name=&
onClick=&form1&quotfunction cc(){if (input type=&text&aa&& value=&quot.form(&submit&input type=&&){}else{return false}}&)=&没效果;
&gt，如何点击条件不足;cc()&&lt
提问者采纳
onClick=&return cc()&
提问者评价
其他类似问题
您可能关注的推广
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁