`

AngularJS多Form验证

阅读更多

        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呢?这些都是多余的。

  • 大小: 19.1 KB
  • 大小: 16 KB
  • 大小: 25.9 KB
  • 大小: 22.4 KB
  • 大小: 17.8 KB
  • 大小: 19.6 KB
  • 大小: 23.2 KB
分享到:
评论

相关推荐

    AngularJs demo 例子(表单验证) form

    本示例以"AngularJs demo 例子(表单验证)form"为主题,结合bootstrap美化,展示了如何在AngularJS中实现表单验证。 **1. AngularJS 表单基础** 在AngularJS中,表单是由`&lt;form&gt;`标签定义的,可以通过`ngForm`或`...

    AngularJS表单验证

    在AngularJS中,表单验证是一项关键功能,它允许开发者实时检查用户输入的数据,确保其符合预期的格式和规则,从而提高用户体验并减少服务器端的压力。AngularJS的表单验证机制是基于模型驱动的,这使得它在处理复杂...

    angularjs2 form和依赖注入

    这里,`[(ngModel)]`实现了双向数据绑定,`required`是表单验证的一部分,`[disabled]`根据表单的有效性禁用提交按钮。 2. **响应式表单**: 响应式表单更灵活,它基于RxJS库,允许在组件类中创建和操作表单模型...

    基于angularJS移动端表单验证效果

    AngularJS中的表单由`&lt;form&gt;`标签定义,通过`ngForm`指令与AngularJS进行绑定。表单内的输入控件通常会带有`ngModel`指令,用于双向数据绑定,使控件值与控制器中的变量同步。 二、内置验证指令 AngularJS内置了...

    AngularJS表单和输入验证实例

    -AngularJS提供了多个内置指令来进行表单验证,如`required`(必须填写)、`email`(邮箱格式验证)、`minlength`(最小长度)、`maxlength`(最大长度)、`pattern`(正则表达式匹配)等。 - 在`&lt;form&gt;`标签中...

    Angularjs2表单+验证

    在AngularJS2中,表单和验证是构建交互式用户界面的重要组成部分。AngularJS2引入了新的表单处理机制,提供了更加灵活和强大的方式来管理表单数据和验证。以下是关于"AngularJS2表单+验证"的知识点详解: 1. **隐式...

    AngularJS自定义表单验证功能实例详解

    本文实例讲述了AngularJS自定义表单验证功能。分享给大家供大家参考,具体如下: Angular实现了大部分常用的HTML5的表单控件的类型(text, number, url, email, date, radio, checkbox),也实现了很多指令做为验证...

    angular_form:angularJs表单和验证的基本模板

    让我们深入探讨这个"angular_form"项目,它是AngularJS中关于表单和验证的一个基础模板。 首先,`angular_form-master`是一个项目的目录名,通常在GitHub等版本控制系统中使用,表示这是一个项目的主分支或最新版本...

    angularJS提交表单(form)

    在AngularJS中,表单(form)是数据绑定和用户交互的核心组件,它允许开发者创建动态、响应式的Web界面。本篇文章将深入讲解如何在AngularJS中使用表单以及相关的方法和示例。 首先,AngularJS中的表单是通过`ng-...

    AngularJS Form 进阶:远程校验和自定义输入项

    本篇文章将深入探讨AngularJS中的表单(Form)处理,特别是远程验证和自定义输入项的实现方法。 ### 1. 表单基础 在AngularJS中,表单通过`ng-form`指令进行创建,可以方便地与Angular的数据模型进行双向绑定。每...

    详解AngularJS实现表单验证

    开始学习AngularJS表单验证: 常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: 复制代码 代码如下:&lt;&lt;input type=”text” required /&gt;  2....

    AngularJS表单验证中级篇(3)

    基本验证 验证插件messages 自定义验证  基本验证 &lt;form name="form" novalidate ng-app&gt; &lt;span&gt;{{form.$invalid}} &lt;span&gt;{{form.$valid}} &lt;span&gt;{{form.$dirty}} &lt;span&gt;{{form.$pristine}} &lt;input ...

    AngularJS 学习笔记(表单验证篇)

    在AngularJS的学习过程中,表单验证是一个至关重要的环节,它能确保用户输入的数据符合预期的格式和规则,从而提高应用程序的稳定性和用户体验。本学习笔记将深入探讨AngularJS中的表单验证机制,主要包括以下几个...

    AngularJS手动表单验证

    例如,可以设置name="theForm",这样,你就可以在AngularJS中通过名字theForm来引用这个表单,并使用它提供的验证方法和属性进行手动验证。 AngularJS的表单验证分为两种:客户端验证和服务器端验证。客户端验证是...

    angular表单验证

    这可以通过创建一个返回`Promise`或`Observable`的函数实现,并将其作为验证器添加到`FormControl`。 5. **自定义验证器** 当内置的验证器不能满足需求时,可以创建自定义验证器函数。这个函数接收`FormControl`...

    AngularJS实现表单验证功能详解

    首先,AngularJS对表单验证提供了内置指令和属性,其中最关键的是form标签的name属性和控件的ngModel指令。在form标签上赋予一个name属性,可以让我们通过该name引用表单对象,在JavaScript中对表单的状态进行操作。...

    AngularJS自动表单验证

    在AngularJS中,表单验证是确保用户输入符合预设规则的关键功能,它有助于提高用户体验并确保数据的准确性。AngularJS提供了两种表单验证方式:手动验证和自动验证。本文将详细探讨自动验证机制,特别是如何利用...

Global site tag (gtag.js) - Google Analytics