详解AngularJS中的表单验证(推荐)
(window.slotbydup=window.slotbydup || []).push({
id: '2611110',
container: s,
size: '240,200',
display: 'inlay-fix'
您当前位置： &
[ 所属分类
作者 红领巾 ]
AngularJS自带了很多验证，什么必填，最大长度，最小长度...，这里记录几个有用的正则式验证1.使用angularjs的表单验证正则式验证只需要配置一个正则式，很方便的完成验证，理论上所有的验证都可以用正则式完成//$scope.mobileRegx = "^1(3[0-9]|4[57]|5[0-35-9]|7[0-9])\\d{8}$";$scope.emailRegx = "^[a-z]([a-z0-9]*[-_]?[a-z0-9]+)*@([a-z0-9]*[-_]?[a-z0-9]+)+[\.][a-z]{2,3}([\.][a-z]{2})?$";$scope.pwdRegx = "[a-zA-Z0-9]*";&div class="form-group"&&input class="form-control" name="mobile" type="text" ng-model="account.mobile" required ng-pattern="mobileRegx"/&&span class="error" ng-show="registerForm.$submitted && registerForm.mobile.$error.required"&*手机号不能为空&/span&&span class="error" ng-show="registerForm.$submitted && registerForm.mobile.$error.pattern"&*手机号地址不合法&/span&&/div&&input type="text" ng-pattern="/[a-zA-Z]/" /&数字设置input的type=number即可&div class="form-group col-md-6"&&label for="password"&预估时间&/label&&div class="input-group"&&input required type="number" class="form-control" ng-model="task.estimated_time" name="time" /&&span class="input-group-addon"&分钟&/span&&/div&&span class="error" ng-show="newTaskForm.$submitted && newTaskForm.time.$error.required"&*请预估时间&/span& &/div&邮箱&input type="email" name="email" ng-model="user.email" /&URL&input type="url" name="homepage" ng-model="user.facebook_url" /&效果效果是实时的，很带感2.使用ngMessages验证表单相对于上面的每个验证都要自己写代码判断，ngMessages提供了一种更为简洁的方式https://docs.angularjs.org/api/ngMessages/directive/ngMessagesangular.module('ngMessagesExample', ['ngMessages']);&form name="myForm"&&label&Enter your name:&input type="text"name="myName"ng-model="name"ng-minlength="5"ng-maxlength="20"required /&&/label&&pre&myForm.myName.$error = {{ myForm.myName.$error | json }}&/pre&&!--需要配合 ng-if使用，否则一开始就显示出来了, 你摸了就会触发验证--& &div ng-messages="myForm.myName.$error" style="color:maroon" role="alert" ng-if="myForm.myName.$touched"&&div ng-message="required"&You did not enter a field&/div&&div ng-message="minlength"&Your field is too short&/div&&div ng-message="maxlength"&Your field is too long&/div&&/div&&/form&简直是第二次解放啊。。。2.动态生成的表单的验证如果你有一部分form的内容是动态生成的，数量和名字都不确定的时候，该如何验证这些生成的元素呢？其实维护一个动态的form本来就是个问题。但是在angular中，只需要记住一点：准备好你的数据，其他的交给angular。像下面这个例子，你只需要维护好一个数组，然后利用ng-repeat就可以快速的呈现到页面上。其实动态的form和一般的form验证都是一致的，只是动态的form需要使用myForm[inout_name].$error的形式访问&!-- 动态显示状态的负责人 --&&div class="form-group col-md-6" ng-repeat="sta in task.status_table | orderBy : sta.sequence_order"&&label&{{sta.status_name}} 负责人&/label&&select required class="form-control" ng-model="sta.user_id" ng-options="qa.id as qa.last_name+' '+qa.last_name for qa in taskUserList" name="{{sta.status_name}}"&&/select&&div ng-messages="newTaskForm[sta.status_name].$error" ng-if="newTaskForm.$submitted || newTaskForm[sta.status_name].$touched"&&p class="error" ng-message="required"&*请选择负责人&/p&&/div&&/div&3. 必填项加亮显有些表单我们不希望粗暴的在下面添加文字信息提示验证，而是希望更简洁的方式，如：加亮边框，突出显示需要做的只是在required验证没通过的时候添加class，改变元素的样式即可&form name="loginForm" novalidate ng-submit="loginPost()" class="navbar-form navbar-right" ng-hide="login"&&fake-autocomplete&&/fake-autocomplete&&div class="form-group"&&input name="user_name" required maxlength="50" type="text" class="form-control" placeholder="手机号或邮箱" ng-model="account.user_name" ng-class="{warn:loginForm.$submitted && loginForm.user_name.$error.required}"&&/div&&div class="form-group"&&input name="password" required type="password" maxlength="50" placeholder="密码" ng-model="account.password" ng-class="{'form-control':1,warn:loginForm.$submitted && loginForm.password.$error.required}"&&/div&&button type="submit" class="btn btn-default"&&span class="glyphicon glyphicon-lock"&&/span& 登录&/button&&/form&.warn {border-color: #f78d8d !outline: 0 !-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgb(239, 154, 154) !box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(239, 154, 154) !}以上所述是小编给大家介绍的详解AngularJS中的表单验证，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
本文前端（javascript）相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程
转载请注明本文标题：本站链接：
分享请点击：
1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责；
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性，不作出任何保证或承若；
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
CodeSecTeam微信公众号
为成功找方法，不为失败找借口。
手机客户端angularjs表单注册--两次密码验证 - 博客频道 - CSDN.NET
TTonlyV5的博客
总有一些人过着你想要的生活
分类：AngularJS
class="container" ng-controller="RegisterCtrl"&
name="loginForm" ng-submit="submitForm()"&
class="form-group" ng-class={'has-success':loginForm.username.$valid}&
&用户名：&
type="text" name="username" class="form-control" ng-model="userdata.username" ng-minlength="4" ng-maxlength="32" required&
class="error" ng-if="loginForm.username.$error.required &&loginForm.username.$touched"&请输入用户名&
class="error" ng-if="(loginForm.username.$error.minlength||loginForm.username.$error.maxlength)&&loginForm.username.$touched"&用户名应在4到32位之间&
class="form-group" ng-class={'has-success':loginForm.password.$valid}&
type="password" name="password" class="form-control" ng-model="userdata.password" ng-minlength="6" ng-maxlength="64" required&
class="error" ng-if="loginForm.password.$error.required &&loginForm.password.$touched"&请输入密码&
class="error" ng-if="(loginForm.password.$error.minlength||loginForm.password.$error.maxlength)&&loginForm.password.$touched"&密码应在6到64位之间&
class="form-group" ng-class={'has-success':loginForm.password.$valid}&
type="password" name="password2" class="form-control" ng-model="userdata.password2" compare="userdata.password" ng-minlength="6" ng-maxlength="64" required&
class="error" ng-if="loginForm.password2.$error.required &&loginForm.password2.$touched"&请输入密码&
class="error" ng-if="(loginForm.password2.$error.minlength||loginForm.password2.$error.maxlength)&&loginForm.password2.$touched"&密码应在6到64位之间&
class="error" ng-if="loginForm.password2.$pare &&loginForm.password2.$dirty"&两次密码不一致&
class="btn btn-primary"&注册&
第一种写法
.controller('RegisterCtrl', function($scope) {
$scope.userdata = {};
$scope.submitForm = function() {
console.log($scope.userdata);
if ($scope.loginForm.$invalid) {
alert('请检查您的信息')
alert('注册成功！')
.directive('compare', function() {
var o = {};
o.strict = 'AE';
o.scope = {
orgText: '=compare'
o.require = 'ngModel';
o.link = function(scope, elem, att, con) {
con.$validators.compare = function(v) {
return v == scope.orgT
scope.$watch('orgText', function() {
con.$validate();
第二种写法
.directive('compare',function(){
strict:'AE',
require:'ngModel',
orgText:'=compare'
link:function(scope,elemt,attars,con){
con.$validators.compare = function(v) {
return v == scope.orgT
scope.$watch('orgText', function() {
con.$validate();
排名：千里之外
（5）（5）（3）（4）（1）（2）（1）（3）（1）（3）（2）AngularJS 提交表单的方式 - 技术翻译 - 开源中国社区
AngularJS 提交表单的方式
【已翻译100%】
英文原文：
推荐于 3年前 (共 13 段, 翻译完成于 06-24)
参与翻译&(3人)&: ,
在AngularJS出现之前，很多开发者就面对了表单提交这一问题。由于提交表单的方式繁杂而不同，很容易令人疯掉……然而现在看来，依然会让人疯掉。
今天，我们会看一下过去使用PHP方式提交的表单，现在如何将其转换为使用Angular提交。使用Angular来处理表单，对我而言，是一个“啊哈”时刻（译者：表示了解或发现某事物的喜悦）。即使它甚至都没有涉及多少Angular表层的东西，但是它却帮助用户看到表单提交之后的潜力，并且理解两种数据绑定方式。
我们会使用jQuery平台来进行这个处理过程。所以所要做的工作首先使用javascript。我们会提交表单，展示错误信息，添加错误类，并且在javascript中显示和隐藏信息。
&翻译得不错哦！
之后，我们会使用Angular。在使用之前，我们要做大部分所需的工作，并且我们之前所做的很多工作会非常容易。让我们开始吧。
仅使用jQuery和AJAX提交表单：如果你想看一篇完整的关于仅使用jQuery和AJAX提交表单的文章，请参见我们的另一篇文章：。
简单的表单
我们会关注两种提交表单的方式：
旧方法：jQuery和PHP提交表单
新方法：AngularJS和PHP提交表单
首先看一下我们的表单，超级简单：
实现页面无刷新表单处理
输入姓名和超级英雄别名
如果有错误，显示错误提示
如果输入有误，将输入变成红色
如果所有内容ok，显示成功提示
在我们的展示中，仅需两个文件
index.html
process.php
&翻译得不错哦！
让我们新建一个PHP来处理表单。该页面非常小并且使用POST方式提交数据。
处理表单：这对我们来说并不是那么重要的。你可以使用其他你喜欢的语言来处理你的表单。
//&process.php
$errors&&&&&&&&&=&array();&&&&&&//&array&to&hold&validation&errors
$data&&&&&&&&&&&&&=&array();&&&&&&&&&//&array&to&pass&back&data
//&validate&the&variables&======================================================
&&&&if&(empty($_POST['name']))
&&&&&&&&$errors['name']&=&'Name&is&required.';
&&&&if&(empty($_POST['superheroAlias']))
&&&&&&&&$errors['superheroAlias']&=&'Superhero&alias&is&required.';
//&return&a&response&===========================================================
&&&&//&response&if&there&are&errors
&&&&if&(&!&empty($errors))&{
&&&&&&&&//&if&there&are&items&in&our&errors&array,&return&those&errors
&&&&&&&&$data['success']&=&
&&&&&&&&$data['errors']&&=&$
&&&&}&else&{
&&&&&&&&//&if&there&are&no&errors,&return&a&message
&&&&&&&&$data['success']&=&
&&&&&&&&$data['message']&=&'Success!';
&&&&//&return&all&our&data&to&an&AJAX&call
&&&&echo&json_encode($data);
这是一个非常简单的表单处理脚本。我们仅检查数据是否存在，如果存在，则不做任何处理和操做；如果不存在，则需要向$errors数组中添加一条信息。
为了返回我们的数据用于AJAX调用，我们需要使用echo和json_encode。这就是我们PHP表单处理所有需要做的操作。使用普通的jQuery AJAX或者Angular处理表单也是这样的。
&翻译得不错哦！
让我们创建一个HTML来展示我们的表单
&!--&index.html&--&
&!doctype&html&
&&&&&title&Angular&Forms&/title&
&&&&&!--&LOAD&BOOTSTRAP&CSS&--&
&&&&&link&rel="stylesheet"&href="///bootstrap/3.0.2/css/bootstrap.min.css"&
&&&&&!--&LOAD&JQUERY&--&
&&&&&&&&&!--&when&building&an&angular&app,&you&generally&DO&NOT&want&to&use&jquery&--&
&&&&&&&&&!--&we&are&breaking&this&rule&here&because&jQuery's&$.param&will&help&us&send&data&to&our&PHP&script&so&that&PHP&can&recognize&it&--&
&&&&&&&&&!--&this&is&jQuery's&only&use.&avoid&it&in&Angular&apps&and&if&anyone&has&tips&on&how&to&send&data&to&a&PHP&script&w/o&jQuery,&please&state&it&in&the&comments&--&
&&&&&&&&script&src="///ajax/libs/jquery/2.0.3/jquery.min.js"&&/script&
&&&&&!--&PROCESS&FORM&WITH&AJAX&(OLD)&--&
&&&&&script&
&&&&&&&&&!--&WE&WILL&PROCESS&OUR&FORM&HERE&--&
&&&&&/script&
&div&class="container"&
&div&class="col-md-6&col-md-offset-3"&
&&&&&!--&PAGE&TITLE&--&
&&&&&div&class="page-header"&
&&&&&&&&&h1&&span&class="glyphicon&glyphicon-tower"&&/span&&Submitting&Forms&with&Angular&/h1&
&&&&&/div&
&&&&&!--&SHOW&ERROR/SUCCESS&MESSAGES&--&
&&&&&div&id="messages"&&/div&
&&&&&!--&FORM&--&
&&&&&form&
&&&&&&&&&!--&NAME&--&
&&&&&&&&&div&id="name-group"&class="form-group"&
&&&&&&&&&&&&&label&Name&/label&
&&&&&&&&&&&&&input&type="text"&name="name"&class="form-control"&placeholder="Bruce&Wayne"&
&&&&&&&&&&&&&span&class="help-block"&&/span&
&&&&&&&&&/div&
&&&&&&&&&!--&SUPERHERO&NAME&--&
&&&&&&&&&div&id="superhero-group"&class="form-group"&
&&&&&&&&&&&&&label&Superhero&Alias&/label&
&&&&&&&&&&&&&input&type="text"&name="superheroAlias"&class="form-control"&placeholder="Caped&Crusader"&
&&&&&&&&&&&&&span&class="help-block"&&/span&
&&&&&&&&&/div&
&&&&&&&&&!--&SUBMIT&BUTTON&--&
&&&&&&&&&button&type="submit"&class="btn&btn-success&btn-lg&btn-block"&
&&&&&&&&&&&&&span&class="glyphicon&glyphicon-flash"&&/span&&Submit!
&&&&&&&&&/button&
&&&&&/form&
现在，我们有了表单。我们另外还使用了Bootstrap来使表单看起来不是那么丑。使用Bootstrap语法规则，每个input下含有一个spot来展示我们文本的错误信息。
&翻译得不错哦！
使用jQuery提交表单
现在，让我们来使用jQuery处理表单提交。我会将所有的代码添加到空的&script&标签中
&!--&index.html&--&
&&&&&!--&PROCESS&FORM&WITH&AJAX&(OLD)&--&
&&&&&script&
&&&&&&&&$(document).ready(function()&{
&&&&&&&&&&&&//&process&the&form
&&&&&&&&&&&&$('form').submit(function(event)&{
&&&&&&&&&&&&&&&&//&remove&the&past&errors
&&&&&&&&&&&&&&&&$('#name-group').removeClass('has-error');
&&&&&&&&&&&&&&&&$('#name-group&.help-block').empty();
&&&&&&&&&&&&&&&&$('#superhero-group').removeClass('has-error');
&&&&&&&&&&&&&&&&$('#superhero-group&.help-block').empty();
&&&&&&&&&&&&&&&&//&remove&success&messages
&&&&&&&&&&&&&&&&$('#messages').removeClass('alert&alert-success').empty();
&&&&&&&&&&&&&&&&//&get&the&form&data
&&&&&&&&&&&&&&&&var&formData&=&{
&&&&&&&&&&&&&&&&&&&&'name'&&&&&&&&&&&&&&&&&:&$('input[name=name]').val(),
&&&&&&&&&&&&&&&&&&&&'superheroAlias'&&&&&:&$('input[name=superheroAlias]').val()
&&&&&&&&&&&&&&&&};
&&&&&&&&&&&&&&&&//&process&the&form
&&&&&&&&&&&&&&&&$.ajax({
&&&&&&&&&&&&&&&&&&&&type&&&&&&&&&:&'POST',
&&&&&&&&&&&&&&&&&&&&url&&&&&&&&&:&'process.php',
&&&&&&&&&&&&&&&&&&&&data&&&&&&&&&:&formData,
&&&&&&&&&&&&&&&&&&&&dataType&&&&&:&'json',
&&&&&&&&&&&&&&&&&&&&success&&&&&:&function(data)&{
&&&&&&&&&&&&&&&&&&&&&&&&//&log&data&to&the&console&so&we&can&see
&&&&&&&&&&&&&&&&&&&&&&&&console.log(data);
&&&&&&&&&&&&&&&&&&&&&&&&//&if&validation&fails
&&&&&&&&&&&&&&&&&&&&&&&&//&add&the&error&class&to&show&a&red&input
&&&&&&&&&&&&&&&&&&&&&&&&//&add&the&error&message&to&the&help&block&under&the&input
&&&&&&&&&&&&&&&&&&&&&&&&if&(&!&data.success)&{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&if&(data.errors.name)&{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&$('#name-group').addClass('has-error');
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&$('#name-group&.help-block').html(data.errors.name);
&&&&&&&&&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&&&&&&&&&&&&&if&(data.errors.superheroAlias)&{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&$('#superhero-group').addClass('has-error');
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&$('#superhero-group&.help-block').html(data.errors.superheroAlias);
&&&&&&&&&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&&&&&&&&&}&else&{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&//&if&validation&is&good&add&success&message
&&&&&&&&&&&&&&&&&&&&&&&&&&&&$('#messages').addClass('alert&alert-success').append('&p&'&+&data.message&+&'&/p&');
&&&&&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&});
&&&&&&&&&&&&&&&&//&stop&the&form&from&submitting&and&refreshing
&&&&&&&&&&&&&&&&event.preventDefault();
&&&&&&&&&&&&});
&&&&&&&&});
&&&&&/script&
这里处理表单有不少的代码。我们有获取表单中变量的代码，有使用AJAX将数据发送至我们的表单的代码，有检查是否有错和显示成功提示的代码。除此之外，我们希望每次表单提交之后，过去的错误信息都会被清除。确实是不少代码。
现在，如果表单中含有错误，则：
如果提交成功：
现在，让我们看使用Angular来提交相同的表单。记住，我们不需要更改任何关于我们的PHP如何处理表单的内容，我们的应用依然会具备相同的功能（在同一个地方展示错误和成功信息）。
&翻译得不错哦！
使用Angular提交表单
我们准备在之前使用的&script&标签中设置我们的Angular应用。所以删除里面的内容，我们就可以开始了。
设置一个Angular应用
&&& 1. 加载Angular
&&& 2. 设置module
&&& 3. 这是controller
&&& 4. 将module和controller应用于HTML
&&& 5. 设置双向变量绑定
&&& 6. 这是错误和信息
看起来好像是很多内容，但是最终，我们会用非常少的代码，并且看起来会非常简洁。另外，创建带有更多输入更大的表单，也会更容易。
Angular 组件和控制器
首先，加载Angular并且新建组件和控制器
&!--&index.html&--&
&&&&&!--&LOAD&JQUERY&--&
&&&&&script&src="///ajax/libs/jquery/2.0.3/jquery.min.js"&&/script&
&&&&&!--&LOAD&ANGULAR&--&
&&&&&script&src="///ajax/libs/angularjs/1.2.0/angular.min.js"&&/script&
&&&&&!--&PROCESS&FORM&WITH&AJAX&(NEW)&--&
&&&&&script&
&&&&&&&&//&define&angular&module/app
&&&&&&&&var&formApp&=&angular.module('formApp',&[]);
&&&&&&&&//&create&angular&controller&and&pass&in&$scope&and&$http
&&&&&&&&function&formController($scope,&$http)&{
&&&&&/script&
&!--&apply&the&module&and&controller&to&our&body&so&angular&is&applied&to&that&--&
&body&ng-app="formApp"&ng-controller="formController"&
现在，我们有了Angular应用的基础。我们已经加载了Angular，创建了组件模块和控制器，并且将其应用于我们的网站。
接下来，我将展示双向绑定是如何工作的。
&翻译得不错哦！
双向数据绑定
这是Angular的核心思想之一，也是功能最强大的内容之一。在中，我们看到：“在Angular网页应用中的数据绑定，是模型和视图层之间的数据自动同步。”这意味着，我们需要在表单中抓取数据，使用$('input[name=name]').val()并不是必需的。
我们在Angular中将数据和变量绑定在一起，无论是javascript也好，view也罢，只要有改变，两者皆变。
为了演示数据绑定，我们需要获取表单的input来自动填充变量formData。让我们回到应用于页面的Angular控制器中。我们在过一下$scope和$http。
$scope：控制器和视图层之间的粘合剂。基本上，变量使用$scope从我们的控制器和视图层之间传递和往来。具体详细的定义，请参见。
$http：Angular服务来帮助我们处理POST请求。更多信息，请参见。
&翻译得不错哦！
使用数据绑定获取变量
好了，闲话少说。我们将这些讨论应用到表单中去。方法比上面讨论的要简单。我们想Angular控制器和视图中分别添加一行。
&!--&index.html&--&
&&&&&!--&PROCESS&FORM&WITH&AJAX&(NEW)&--&
&&&&&script&
&&&&&&&&//&define&angular&module/app
&&&&&&&&var&formApp&=&angular.module('formApp',&[]);
&&&&&&&&//&create&angular&controller&and&pass&in&$scope&and&$http
&&&&&&&&function&formController($scope,&$http)&{
&&&&&&&&&&&&//&create&a&blank&object&to&hold&our&form&information
&&&&&&&&&&&&//&$scope&will&allow&this&to&pass&between&controller&and&view
&&&&&&&&&&&&$scope.formData&=&{};
现在，我们已经建立了一个formData对象。让我们用表单数据来填充它。在显示调用每个输入和获得val()之前，我们用ng-model绑定一个特殊的输入到变量。
&!--&index.html&--&
&&&&&!--&FORM&--&
&&&&&form&
&&&&&&&&&!--&NAME&--&
&&&&&&&&&div&id="name-group"&class="form-group"&
&&&&&&&&&&&&&label&Name&/label&
&&&&&&&&&&&&&input&type="text"&name="name"&class="form-control"&placeholder="Bruce&Wayne"&ng-model="formData.name"&
&&&&&&&&&&&&&span&class="help-block"&&/span&
&&&&&&&&&/div&
&&&&&&&&&!--&SUPERHERO&NAME&--&
&&&&&&&&&div&id="superhero-group"&class="form-group"&
&&&&&&&&&&&&&label&Superhero&Alias&/label&
&&&&&&&&&&&&&input&type="text"&name="superheroAlias"&class="form-control"&placeholder="Caped&Crusader"&ng-model="formData.superheroAlias"&
&&&&&&&&&&&&&span&class="help-block"&&/span&
&&&&&&&&&/div&
&&&&&&&&&!--&SUBMIT&BUTTON&--&
&&&&&&&&&button&type="submit"&class="btn&btn-success&btn-lg&btn-block"&
&&&&&&&&&&&&&span&class="glyphicon&glyphicon-flash"&&/span&&Submit!
&&&&&&&&&/button&
&&&&&/form&
&&&&&!--&SHOW&DATA&FROM&INPUTS&AS&THEY&ARE&BEING&TYPED&--&
&&&&&&&&{{&formData&}}
&&&&&/pre&
现在，既然Angular已经将每个输入绑到了formData。 当你输入每个输入框，你可以看到formData对象被填充了！有没有很酷！
你不必在view中使用$scope。一切被认为是嵌入到$scope中的。
&翻译得不错哦！
在我们的旧表单中，我们使用jQuery提交表单，像这样$('form').submit()。现在我们使用Angular称作ng-submit的特性。要想完成这个，我们需要添加一个控制器函数来处理表单，然后告诉我们form使用这个控制器函数：
&!--&index.html&--&
&&&&&!--&PROCESS&FORM&WITH&AJAX&(NEW)&--&
&&&&&script&
&&&&&&&&//&define&angular&module/app
&&&&&&&&var&formApp&=&angular.module('formApp',&[]);
&&&&&&&&//&create&angular&controller&and&pass&in&$scope&and&$http
&&&&&&&&function&formController($scope,&$http)&{
&&&&&&&&&&&&//&create&a&blank&object&to&hold&our&form&information
&&&&&&&&&&&&//&$scope&will&allow&this&to&pass&between&controller&and&view
&&&&&&&&&&&&$scope.formData&=&{};
&&&&&&&&&&&&//&process&the&form
&&&&&&&&&&&&$scope.processForm&=&function()&{
&&&&&&&&&&&&};
&&&&&!--&FORM&--&
&&&&&form&ng-submit="processForm()"&
现在我们的form知道提交时使用控制器函数了。既然已经到位了，然我们用$http来处理表单吧。
处理表单的语法看起来跟原始方式很像。好处是我们不需要手动抓取表单数据，或者注入，隐藏，添加类显示错误或成功信息。
&!--&index.html&--&
//&process&the&form
$scope.processForm&=&function()&{
&&&&$http({
&&&&&&&&method&&:&'POST',
&&&&&&&&url&&&&&:&'process.php',
&&&&&&&&data&&&&:&$.param($scope.formData),&&//&pass&in&data&as&strings
&&&&&&&&headers&:&{&'Content-Type':&'application/x-www-form-urlencoded'&}&&//&set&the&headers&so&angular&passing&info&as&form&data&(not&request&payload)
&&&&&&&&.success(function(data)&{
&&&&&&&&&&&&console.log(data);
&&&&&&&&&&&&if&(!data.success)&{
&&&&&&&&&&&&&&&&//&if&not&successful,&bind&errors&to&error&variables
&&&&&&&&&&&&&&&&$scope.errorName&=&data.errors.
&&&&&&&&&&&&&&&&$scope.errorSuperhero&=&data.errors.superheroA
&&&&&&&&&&&&}&else&{
&&&&&&&&&&&&&&&&//&if&successful,&bind&success&message&to&message
&&&&&&&&&&&&&&&&$scope.message&=&data.
&&&&&&&&&&&&}
&&&&&&&&});
这就是我们的表单！没有添加或移除类。我们需要每次提交表单时都清楚错误。我们只需绑定变量和需要用到的视图。这非常棒，因为处理器用来处理数据，而视图用来显示数据.
&翻译得不错哦！
jQuery POST vs Angular POST
有时能看到用POST方式提交在服务器中看不到数据，这是因为jQuery和Angular的序列化和发送数据的方式不同。这归结于你所使用的服务器语言和它理解Angular提交的数据的能力。
上面的代码是应用于PHP服务器的，jQuery对于$.param函数则是必需的。虽然实现上文中提到的内容有非常多不使用jQuery的方法，但在本实例中，使用jQuery的唯一原因就是，它更简单。
下面简洁的语法将会基于你服务器端语言来工作。更多关于AngularJS AJAX调用的信息，欢迎阅读这篇非常棒的文章：
&翻译得不错哦！
我们的翻译工作遵照 ，如果我们的工作有侵犯到您的权益，请及时联系我们
你可以使用sitemesh
不用纠结用啥，稳定才是王道
适合单页面应用
不要用angular，不合适