AngularJS多Form验证

最新推荐文章于 2023-08-23 23:32:40 发布

wjxbj

最新推荐文章于 2023-08-23 23:32:40 发布

阅读量235

点赞数

分类专栏： AngularJS 文章标签： JavaScript AngularJS ViewUI

AngularJS 专栏收录该内容

85 篇文章 0 订阅

订阅专栏

AngularJS中一个页面可以有多个Form，且Form之间还可以嵌套，对于多个Form我们在提交时，通过什么方式来判断校验是否都通过了呢？

一.并列Form的校验控制

并列Form对当前的Controller来说是可见了，因此可以直接根据Form的$valid进行判断。

app.js

var myApp=angular.module('myModule', ['ui.bootstrap']);
myApp.controller('myCtrl',function($scope){
    $scope.model = {
	submitButtonIsDisable : true
    };
    $scope.reset=function(){ //表单重置
         $scope.user={account:'',email:''};
    };
    
    $scope.$watch(
	function() {
	    if(!$scope.myform.$valid || !$scope.myform2.$valid) {
	    	$scope.model.submitButtonIsDisable = true;
	    }else {
	    	$scope.model.submitButtonIsDisable = false;
	    }
	}
    );
});
angular.element(document).ready(function() {   
 angular.bootstrap(document,['myModule']);  
});

formValidation01.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 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">
				  <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>
				</form>
				
				<form id="css_form" class="form-horizontal" novalidate name="myform2" role="form">
				  <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="myform2.myEmail.$error.required">邮箱不能为空！</div>
					   <div class="alert alert-danger well-sm" ng-show="myform2.myEmail.$error.email">邮箱格式不正确!</div>
				  </div>
			    </form>
				  
				  <!--按钮组-->
				  <div class="form-group">
				   <div class="col-md-offset-2 col-md-10">
				      <button class="btn btn-default"  ng-disabled="model.submitButtonIsDisable">提交</button>
				      <button class="btn btn-default" ng-click="reset()">重置</button>
				   </div>
				  </div>
			</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的校验

嵌套的Form与被嵌套的Form同名，这样的对Form的操作和同一个Form一样。

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']);  
});

formValidation03.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 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">
				  <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>
				  <form id="css_form" class="form-horizontal" novalidate name="myform" role="form">
					  <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>
				  </form>
				</form>
				
				  <!--按钮组-->
				  <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>
			</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>

运行结果：一切OK

但实际上不同名称的Form嵌套才算是真正的嵌套，下面我们来看嵌套Form与被嵌套Form名称不同的情况。

app.js同上实例

formValidation01.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 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">
				  <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>
				  <form id="css_form" class="form-horizontal" novalidate name="myform2" role="form">
					  <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="myform2.myEmail.$error.required">邮箱不能为空！</div>
						   <div class="alert alert-danger well-sm" ng-show="myform2.myEmail.$error.email">邮箱格式不正确!</div>
					  </div>
				  </form>
				</form>
				
				  <!--按钮组-->
				  <div class="form-group">
				   <div class="col-md-offset-2 col-md-10">
				      <button class="btn btn-default" ng-disabled="!myform.$valid && !myform2.$valid">提交</button>
				      <button class="btn btn-default" ng-click="reset()">重置</button>
				   </div>
				  </div>
			</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的验证信息一直没有显示。修改formValidation01.html，在被嵌套的myform2上加一个Controller，效果也一样。

进一步调试跟踪发现，当前$scope下只有myform，而没有myform2，如下所示：

当然，如果在被嵌套的form上加一个控制器，并修改被嵌套的form的name与嵌套form的name一样，一切OK。但这样的话，为什么要嵌套一个form还加一个多余的controller呢？这些都是多余的。