AngularJS表单提交实例详解

本文实例讲述了AngularJS表单提交。分享给大家供大家参考,具体如下:

AngularJS中的数据绑定

AngularJS创建实时模板来代替视图,而不是将数据合并进模板之后更新DOM。任何一个独立视图组件中的值都是动态替换的。

ng-app属性声明所有被其包含的内容都属于这个AngularJS应用,这也是我们可以在Web应用中嵌套AngularJS应用的原因。只有被具有ng-app属性的DOM元素包含的元素才会受AngularJS影响。

当AngularJS认为某个值可能发生变化时,它会运行自己的事件循环来检查这个值是否变“脏”。如果该值从上次事件循环运行之后发生了变化,则该值被认为是“脏”值。这也是Angular可以跟踪和响应应用变化的方式。

这个过程被称作脏检查。脏检查是检查数据模型变化的有效手段。当有潜在的变化存在时,AngularJS会在事件循环时执行脏检查来保证数据的一致性。

借助AngularJS,不需要构建复杂和新的JavaScript功能,就可以在视图中实现类自动同步的机制。

我们使用ng-model指令将内部数据模型对象($scope)中的name属性绑定到了文本输入字段上。

数据模型对象是指$scope对象。$scope对象是一个简单的JavaScript对象,其中的属性可以被视图访问,也可以同控制器进行交互。
双向数据绑定意味着如果视图改变了某个值,数据模型会通过脏检查观察到这个变化,而如果数据模型改变了某个值,视图也会一句变化重新渲染。

模块

在AngularJS中,模块是定义应用的最主要的方式。模块包含了主要的应用代码,它允许我们使用angular.module()方法来声明模块,这个方法能够接受两个参数,第一个是模块的名称,第二个是依赖列表,也就是可以被注入到模块中的对象列表。

angular.module('myApp',[]);

控制器

AngularJS中的控制器是一个函数,用来向视图的作用域中添加额外的功能。我们用它来给作用域对象设置初始状态,并添加自定义行为。
当我们在页面上创建一个新的控制器时,AngularJS会生成并传递一个新的$scope给这个控制器。

AngularJS同其他JavaScript框架最主要的一个区别就是,控制器并不适合用来执行DOM操作、格式化或数据操作,以及除存储数据模型之外的状态维护操作。它只是视图和$scope之间的桥梁。

表达式

用{{}}符号将一个变量绑定到$scope上的写法本质上就是一个表达式:{{expression}}。对表达式进行的任何操作,都会在其所属的作用域内部执行,因此可以在表达式内部调用那些限制在此作用域内的bianl,并进行循环、函数调用、将变量应用到数学表达式中等操作。

本例子采用技术

① 页面使用bootstrap布局,页面是bootstrap的模板

② 前端框架AngularJS

③ 后台使用SpringMVC

整个代码的功能是在输入内容后,提交给后台,后台再返回数据显示到页面,提交时有验证提示。

我在这里列举了三种方式来做这次应用

1.全局作用域的控制器
2.模块划分的控制器
3.将后台请求做成服务抽离出来的控制器

JSP代码:

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-cn" ng-app="MyApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>接口测试</title>
<!-- Bootstrap -->
<link href="css/bootstrap/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
</head>
<body>
 <div ng-controller="keepController">
 <form name="testForm" novalidate>
 <div id="responseMsg" class="testMode" >
 <div>
  <h3>认证接口:</h3>
  <textarea required class="form-control" rows="3" id="authData" name="authData" ng-model="authData"></textarea>
  <span style="color:red" ng-show="testForm.authData.$dirty && testForm.authData.$invalid">
     <span ng-show="testForm.authData.$error.required">认证接口必填</span>
   </span>
   </div>
 <div>
  <h3>数据请求接口:</h3>
  <textarea required class="form-control" rows="3" id="reqData" name="reqData" ng-model="reqData"></textarea>
  <span style="color:red" ng-show="testForm.reqData.$dirty && testForm.reqData.$invalid">
     <span ng-show="testForm.reqData.$error.required">数据请求接口必填</span>
   </span>
 </div>
 <div style="text-align: right;margin-right: 20px;margin-top:10px;">
  <button class="btn btn-default" role="button" ng-click="keepTest()"
  ng-disabled="testForm.authData.$invalid ||
  testForm.reqData.$invalid"
  >连接测试</button>
 </div>
 <div>{{ansInfo}}</div>
 </div>
 </form>
 </div>
 <script src="js/angularJS/angular.min.js"></script>
 <script type="text/javascript">
//1.全局作用域的例子
 /* function keepController($scope,$http) {
  $scope.keepTest= function(){
  var pData = {authData:$scope.authData,reqData:$scope.reqData};
    $http({method:'POST',url:'testKeep',params:pData}).
    success(function(response) {
     $scope.ansInfo = response.a;});
  };
 } */
//2.模块化控制器
 /*var app = angular.module('MyApp',[]);
  app.controller('keepController',function($scope,$http){
  $scope.keepTest= function(){
  var pData = {authData:$scope.authData,reqData:$scope.reqData};
    $http({method:'POST',url:'testKeep',params:pData}).
    success(function(response) {
     $scope.ansInfo=response.a;});
  }
 }); */
 //3.请求服务抽出来的控制器
 angular.module('myapp.services',[]).factory('testService',function($http){
  var runRequest = function(pData){
  return $http({method:'POST',url:'testKeep',params:pData});
  };
  return {
  events:function(pData){
   return runRequest(pData);
  }
  };
 });
 angular.module('MyApp',['myapp.services']).
  controller('keepController',function($scope,testService){
  $scope.keepTest= function(){
   var pData = {authData:$scope.authData,reqData:$scope.reqData};
   testService.events(pData).success(function(response){
   $scope.ansInfo=response.a;
   });
  };
 });
 </script>
 <script src="js/jquery.js"></script>
 <script src="js/bootstrap/bootstrap.min.js"></script>
</body>
</html>

JAVA代码:

@RequestMapping(value = "testKeep", produces = "text/plain;charset=UTF-8")
@ResponseBody
public String testKeep(HttpServletRequest request,
  HttpServletResponse response) {
 System.out.println(request.getParameter("authData"));
 System.out.println(request.getParameter("reqData"));
 JSONObject ja = new JSONObject();
 ja.put("a", "aaa");
 ja.put("b", "bbb");
 ja.put("c", "ccc");
 System.out.println("test:"+ja.toString());
 return ja.toString();
}

更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

时间: 2017-02-15

使用AngularJS对表单提交内容进行验证的操作方法

AngularJS是一款优秀的前端JS框架,已经被用于Google的多款产品当中.它有着诸多特性,最为核心的是:MVC.模块化.自动化双向数据绑定.语义化标签.依赖注入等--使用它可以大大减少书写代码的工作量,但和Jquery不同,使用AngularJS有一定的难度,因此今天我将介绍以下怎样使用AngularJS来对表单的提交内容进行验证. AngularJS对表单中常用的验证操作 $dirty 表单有填写记录 $valid 字段内容合法的 $invalid 字段内容是非法的 $pristine

AngularJS使用ngMessages进行表单验证

AngularJS 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVVM.模块化.自动化双向数据绑定.语义化标签.依赖注入等等. 名称为"ngMessages"的module,通过npm install angular-messages进行安装.在没有使用ngMessages之前,我们可能这样写验证: <form name="

AngularJS中实现用户访问的身份认证和表单验证功能

身份验证 权限的设计中比较常见的就是RBAC基于角色的访问控制,基本思想是,对系统操作的各种权限不是直接授予具体的用户,而是在用户集合与权限集合之间建立一个角色集合.每一种角色对应一组相应的权限.     一旦用户被分配了适当的角色后,该用户就拥有此角色的所有操作权限.这样做的好处是,不必在每次创建用户时都进行分配权限的操作,只要分配用户相应的角色即可,而且角色的权限变更比用户的权限变更要少得多,这样将简化用户的权限管理,减少系统的开销. 在Angular构建的单页面应用中,要实现这样的架构我们

详解AngularJS实现表单验证

开始学习AngularJS表单验证: 常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: 复制代码 代码如下: <<input type="text" required /> 2. 最小长度 验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": 复制代码 代码如下: <<input type="tex

AngularJS模仿Form表单提交的实现代码

废话不多说了,直接给大家贴代码了. $http({ url: "http://localhost:10086/yuanxin/Conference/ImportExcelDataForBusRoute", method: 'Post', headers: { 'Content-Type': 'multipart/form-data' }, data: { BusRoute: file, ConferenceID: "1" }, transformRequest: f

angularjs $http实现form表单提交示例

需求:请求第三方后台接口返回一段html字符串如下,由前端去实现form表单的POST提交, 说明:form表单submit()实现自动提交input标签hidden,注意script代码中的document.redirect.submit(); <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head

AngularJS使用angular-formly进行表单验证

当验证表单中有很多字段时,这时候可能希望把html的生成以及验证逻辑放到controller中,在页面,也许是这样的: <some-form fiedls="vm.someFields" ...></some-form> 然后,在controller中定义各个字段以及验证.angular-formly就是为这个需求而存在. 在controller中,把各个字段定义在数组中: vm.rentalFields = [ { key:'first_name', type

AngularJS实现表单手动验证和表单自动验证

AngularJS的表单验证大致有两种,一种是手动验证,一种是自动验证. 一.手动验证 所谓手动验证是通过AngularJS表单的属性来验证.而成为AngularJS表单必须满足两个条件: 1.给form元素加上novalidate="novalidate": 2.给form元素加上name="theForm",如下: <!DOCTYPE html> <html lang="en" ng-app="myApp1&quo

Thinkphp框架 表单自动验证登录注册 ajax自动验证登录注册

动态验证:(不需要建Model模型) 1.建一个控制器,做表单操作(包含验证) <?php namespace Biaodan\Controller; use Think\Controller; class BiaodanController extends Controller { public function test() { if(empty($_POST))//如果$_POST空,显示添加页面, { $this->show(); } else //如果$_POST不为空,走验证,验证

Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)

AngularJS提供了表单验证,但是验证的过程交互体验很不好,比如重设密码,重复密码的时候一键入就会提示密码不正确,现整理了两种方法,仅供借鉴. 一,点击提交验证 <form action="" class="form-horizontal col-md-9" name="reset_pwd" ng-submit="resetPwd()"> <div class="form-group"

thinkPHP自动验证、自动添加及表单错误问题分析

本文实例讲述了thinkPHP自动验证.自动添加及表单错误问题.分享给大家供大家参考,具体如下: 最近再做一个项目,想用thinkphp写验证,结果泪奔了几天.一开始就是令牌错误,后来有什么自动添加无效. 一直在测试,一直在查找,知道发现create()方法原来有两个参数, 第一个参数是大家都知道了数据参数,第二个是隐藏的$type参数,这个参数用来控制什么的呢?? 复制代码 代码如下: //$type = $type?$type!empty($data[$this->getPk()])?sel

用JavaScrip正则表达式验证form表单的方法

document:标签之间 location:url history:前进后退 <html> <head> <script type="text/javascript"> function show() { //弹出一个提示框 window.alert("hh"); } //将show方法绑定到按钮上 window.onload=function() { //定位到按钮 var buttonElement=document.for

ThinkPHP表单自动验证实例

本文实例讲述了ThinkPHP表单自动验证的实现方法.分享给大家供大家参考.具体方法如下: 该示例代码采用TP 3.2框架实现.具体代码如下: 复制代码 代码如下: public function add_post(){         //验证规则         $rule=array(             array('name','require','请输入姓名',1),//必须验证name         );           $m=M('user');           /

thinkPHP实现表单自动验证

昨天晚上我们老大叫我弄表单自动验证功能,愁了半天借鉴了好多官网的知识,才出来,诶,总之分享一下我自己的成果吧! thinkphp 在Model基类为我们定义了自动验证的函数和正则表达式,我们只需要在对应的数据库表的模型类下建立$_validate属性就可以了. 1.我们找到Model基类,可以看到 protected $_validate       = array();  // 自动验证定,它是数组类型的,下面在对应数据模型文件定义它: 2. 复制代码 代码如下: public functio

Ajax提交表单时验证码自动验证 php后端验证码检测

本文通过源码展示如何实现表单提交前,验证码先检测正确性,不正确则不提交表单,更新验证码. 1.前端代码 index.html <!DOCTYPE html> <html> <head> <title>验证码提交自验证</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta htt

使用jQuery validate 验证注册表单实例演示

Validation是jQuery的插件,提供的方法可以大大简化验证表单的工作,功能也足够一般的需要了.rules也足够简单,很容易上手,举个简单的例子,用validation来验证注册表单. 首先确定验证的目标是: 1. 必填项不能为空 2. 注册用户名必须为6-12个字符内 3. 合格的email格式 4. 密码必须为6-18个字符 5. 确认密码必须跟密码一致 ok,目标很明确了.正片开始 复制代码 代码如下: <script type="text/javascript"

Javascript的表单验证-提交表单

推荐阅读:Javascript的表单验证长度 Javascript的表单验证-初识正则表达式 Javascript的表单验证-揭开正则表达式的面纱 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. 坏数据不该抵达服务器:提交表单时的验证 表单域对象里有个form特性,它使用数组表示了整份表单的域 假如这里只有一个简单的信息文本框和一个邮政编码框,还有一个提交按钮 <form> <input id="message" name