AngularJS表单验证

标签： angularjs 验证 | 发表时间：2014-09-14 00:29 | 作者：bijian1013
出处：http://www.iteye.com

        通过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 ng-controller="myCtrl">

	<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





已有 0 人发表留言，猛击->> 这里<<-参与讨论


ITeye推荐



相关 [angularjs 验证] 推荐：

AngularJS表单验证

- - JavaScript - Web前端 - ITeye博客
        通过AngularJS我们不仅可以隐藏/显示错误提示消息，高亮输入框，还可以通过编写指令来随心所欲的控制表单验证方式. $scope.reset=function(){ //表单重置. 表单验证.
表单验证
.

学习AngularJS实例

- - Web前端 - ITeye博客
怎么样快速学习AngularJS. 相信很多初学者都有过或者类似的疑问，其实这个问题没有标准的答案，每个人的技术背景、工作经验等等都不经相同，所以学习AngularJS的切入点肯定也就不同，我之前初略使用过knockoutjs，当我第一眼看到AngularJS的Helloworld案例后，顿时就被声明式的语法和强大的双向绑定特性所吸引.

AngularJS基本特性介绍

- - ITeye博客
使用AngularJS非常简单，如下：. 以指令ng-app定义AngularJS的作用域，然后引入angular-1.0.1.min.js，这就是AngularJS的Hello World，简单但是无用. HTML执行表达式（Expressions）. AngularJS允许在HTML直接执行表达式，如下：.

angularjs与服务器交互

- - CSDN博客Web前端推荐文章
真正的应用需要和真实的服务器进行交互，移动应用和新兴的Chrome桌面应用可能是个例外，但是对于此外的所有应用来说，无论你是想把数据持久化到云端，还是需要与其他用户进行实时交互，都需要让应用与服务器进行交互. 为了实现这一点，Angular提供了一个叫做$http的服务. 它提供了一个可扩展的抽象方法列表，使得与服务器的交互更加容易.

AngularJS与服务器交互

- - JavaScript - Web前端 - ITeye博客
        对于AJAX应用（使用XMLHttpRequests）来说，向服务器发起请求的传统方式是：获取一个XMLHttpRequest对象的引用、发起请求、读取响应、检查状态码，最后处理服务端的响应. }else if(xmlhttp.status == 400) { //或者可以是任何以4开头的状态码.

使用AngularJS构建大型Web应用

- - InfoQ cn
AngularJS是由Google创建的一种JS框架，使用它可以扩展应用程序中的HTML词汇，从而在web应用程序中使用HTML声明动态内容. 在该团队工作的软件工程师 Brian Ford近日撰写了一篇 blog，分享了如何使用AngularJS构建大型Web应用的经验. 这些经验对于使用其他JS框架构建大型应用的开发者也极具借鉴意义.

使用angularJS的三个重要原因

- - Web前端 - ITeye博客
如果你不熟悉什么是Angular.js的话，小编我强烈推荐你阅读 Javascript教程：AngularJS的五个超酷特性. 简单来说Angular.js是google开发者设计和开发的一套前端开发框架，帮助你简化前端开发的负担. 当然，这里有很多其它的前端开发框架，但是如何选择合适的前端框架对于我们这些开发人员来说就不是那么容易了.

AngularJS的IE浏览器兼容性

- - JavaScript - Web前端 - ITeye博客
        如果你要让你的AngularJS应用兼容IE8和IE8以下的版本的话，你需要做一些特殊处理. 要让你的AngularJS应用在IE中正常运行你必须：.     a.确保JSON字符串能被正常解析（IE7需要），你可以使用JSON2或者JSON3来实现.     b.不能使用自定义的元素标签，如（你只能使用属性的形式，如
）.

借助AngularJS写优雅的代码

- - 四火的唠叨
接触 AngularJS还真有点碰巧，在用JQuery写数据绑定的时候，我被数据对象和DOM之间的同步整烦了，要写一大堆方法绑定和取值/设值的代码逻辑，丑得要死. 数据对象发生变更以后，要及时更新DOM树；. 用户操作改变DOM树以后，要回头更新数据对象. 这个问题还是举例来说清楚一些，比如我定义了这样一个queryObj：.

AngularJS 最常用的八种功能

- - Web前端 - ITeye博客
本文地址： http://zhaoyanblog.com/archives/99.html. 第一 迭代输出之ng-repeat标签. ng-repeat让table ul ol等标签和js里的数组完美结合. 你甚至可以指定输出的顺序：. 第二 动态绑定之ng-model标签. 任何有用户输入，只要是有值的html标签，都可以动态绑定js中的变量，.