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>
	<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。

运行效果:
AngularJS表单验证_第1张图片
AngularJS表单验证_第2张图片
AngularJS表单验证_第3张图片

二.实例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全部为我们搞定了。

运行效果:
AngularJS表单验证_第4张图片
AngularJS表单验证_第5张图片
AngularJS表单验证_第6张图片

三.参数说明
①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

你可能感兴趣的:(JavaScript,AngularJS)