AngularJS表单验证

通过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>
        <div>
            <div>表单验证</div>
        </div>
        <div>
			<div>
				<form  id="css_form" novalidate name="myform" role="form" ng-controller="myCtrl">
				  <div>
					   <label for="inputAccount">账号:</label>
					   <div>
					   	<!--输入框 -->
					   	<input type="number"  ng-model="user.account" min="3" max="6"  name="myAccount" required id="inputAccount" placeholder="请输入3-6的整数"/>
					   </div>
					   <!-- 隐藏块,显示验证信息--> 
					   <div ng-show="myform.myAccount.$error.required">账号不能为空!</div>
					   <div ng-show="myform.myAccount.$error.min || myform.myAccount.$error.max">输入值必须在3-6之间!</div>
				  </div>

				  <div>
					   <label for="inputEmail">邮箱:</label>
					   <div>
					   	<!--输入框 -->
					   	<input type="email" ng-model="user.email" name="myEmail" required id="inputEmail" placeholder="请输入邮箱地址"/>
					   </div>
					   <!-- 隐藏块,显示验证信息--> 
					   <div ng-show="myform.myEmail.$error.required">邮箱不能为空!</div>
					   <div ng-show="myform.myEmail.$error.email">邮箱格式不正确!</div>
				  </div>

				  <!--按钮组-->
				  <div>
				   <div>
				      <button  ng-disabled="!myform.$valid">提交</button>
				      <button 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>
        <div>
            <div>表单验证</div>
        </div>
        <div>
			<div>
				<form  id="css_form" novalidate name="myform" role="form" ng-controller="myCtrl">
				  <div>
					   <label for="inputAccount">账号:</label>
					   <div>
					   	<!--输入框 -->
					   	<input type="text"  ng-model="user.account" ng-pattern="/^[0-9]{6}$/"  name="myAccount" required id="inputAccount" placeholder="请输入6位的数字账号"/>
					   </div>
					   <div><font color="red">*</font></div>  
				  </div>

				  <div>
					   <label for="inputEmail">邮箱:</label>
					   <div>
					   	<!--输入框 -->
					   	<input type="email" ng-model="user.email" name="myEmail" required id="inputEmail" placeholder="请输入邮箱地址"/>
					   </div>
					   <div><font color="red">*</font></div>
				  </div>

				  <!--按钮组-->
				  <div>
				   <div>
				      <button  ng-disabled="!myform.$valid">提交</button>
				      <button 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

Tagged: , ,

Comments are closed.