AngularJS实现了数据双向绑定，改变了html格局下需手写大段js来处理动态数据问题。
引入AngularJS，然后在应用AnglarJS的外层标签中添加ng-app="xxApp"，这样该标签及其中内容被声明为了xxApp。类似的通过ng-controller标签声明controller，controller需属于某个app中，因此应该在ng-app标签之内（可以在同一个标签上），对应mvc中的controller层。在controller中可以包含多个model，通过添加ng-model来进行数据绑定。一个简单的form表单如下所示
<body ng-app="goodsAddApp" ng-controller="goodsController"> <form name="form" ng-submit="processForm()"> <div class="row"> <label for="goodsName">商品名称：</label> <input ng-model="goods.name" name="goodsName" type="text" ng-minlength="3" required name-validation> <span class="error" ng-show="form.goodsName.$error.required ">不能为空</span> <span class="error" ng-show="form.goodsName.$error.minlength ">长度不足3位</span> <span class="error" ng-show="form.goodsName.$error.exist ">已存在</span> </div> <div class="row"> <label>关键词（通过空格分割）：</label> <input ng-model="goods.keyWord" name="name" type="text"> </div> <input type="submit" name="提交"> </form>
其中ng-submit表示表单的提交方法为processForm()，而required用于非空校验、ng-minlength用于最短长度校验、name-validation则是自定义的校验（需要注册nameValidation方法）。再看一下脚本
<script type="text/javascript">
var app = angular.module('goodsAddApp',[]);
app.controller('goodsController',function($scope,$http){
$scope.processForm = function(isValid){
if(!isValid){
alert("表单校验失败");
return;
}
$http({
method:'POST',
url:'save',
data:$.param($scope.goods),
headers:{ 'Content-Type': 'application/x-www-form-urlencoded' }
}).success(function(data){
console.log(data);
if(!data.success){
$scope.errorName = data.errors.name;
}else{
$scope.message = data.message;
}
})
};
});
app.directive('nameValidation', function($http) {
return {
require : 'ngModel',
link : function(scope,elm,attrs,ctrl){
elm.bind('focusout',function(){
$http({method:'POST',url:"exists",data:elm.val()}).
success(function(data,status,headers,config){
ctrl.$setValidity('exist',!data);
})
})
}
}
});
</script>
第一行将刚才声明的app注册为AngularJS中的module对象，第二行则是注册controller，并声明了该作用域下的js方法，app.directive('nameValidation', function($http) {则是为app注册了自定义的校验方法。例中方法为后台校验名称是否重复ctrl.$setValidity('exist',!data)方法将校验错误定义为exist。 formName.inputfieldName.$error.validatorName 可以取到某字段的某个校验的结果。
笔者遇到的几个错误：
- 一开始将input的name设置为了“name”，然后ng-show="form.name.$error.required"没有起作用，后来改为了其它的名称才生效，说明form存在固有属性为name，导致语义出错。
- ng-app没有设置名字，然后报错 AngularJS-Argument 'xxx' is not a function,got undefined，这是因为Angular从1.3.0beta15版本开始不再支持全局的controller，需要改为 xxxModule.controller('xxxCtrl',function($scope){}
更详细的表单校验参照http://www.cnblogs.com/rohelm/p/4033513.html
相关推荐
通过查看博文链接（由于实际链接无法在此提供，您需要自行访问https://bijian1013.iteye.com/blog/2392684），您可以获得一个完整的AngularJS表单校验示例，包括HTML模板和对应的JavaScript代码。这个示例会详细展示...
AngularJs是谷歌开发的一个前端JavaScript框架，它允许...对于希望掌握AngularJs表单校验的开发者来说，这个实例是一个很好的参考，通过理解和实践这些基本概念和用法，可以进一步掌握更复杂场景下的表单校验实现。
使用angularJS完成表单验证功能
自动验证是AngularJS表单验证中的另一种方式。AngularJS利用HTML5的表单验证特性，如required、pattern、min、max等，自动地对表单元素进行验证，无需开发者编写额外的验证逻辑代码。 当表单元素符合HTML5验证要求...
AngularJS表单可以使用HTML原生的表单和控件，比如`<input>`、`<select>`、`<button>`和`<textarea>`等元素。AngularJS通过`ng-app`指令指定应用的范围，`ng-controller`用于指定视图对应的控制器，而`ng-model`则...
AngularJS动态校验是Web开发中的一个重要概念，尤其在构建复杂表单和处理用户输入时。AngularJS，作为一款强大的JavaScript框架，提供了丰富的功能来帮助开发者实现动态验证，提高用户体验并确保数据的准确性和完整...
本文将深入讲解AngularJS表单校验的使用方法。 首先，我们要理解表单校验的目的。尽管前端校验无法完全确保数据安全，因为它容易被跨站伪造请求（CSRF）等攻击手段绕过，但前端校验能够即时反馈错误信息，减少无效...
此外，AngularJS表单还增加了自动校验和防止重复提交的功能。表单和输入元素的状态可以通过内置的CSS类来反映，例如`ng-valid`和`ng-invalid`，这些类的添加与否取决于表单元素的校验结果。 在示例代码中，通过`ng-...
Angularjs 提供了内置指令来支持表单验证，而本篇文章则着重介绍如何使用Angularjs指令来实现表单校验。 首先，我们来看一下Angularjs中表单校验的基本概念。在Angularjs中，表单校验主要通过ngModel控制器的验证...
Angular中的模版驱动表单（Template-driven forms）是一种常见的数据绑定和验证机制，它允许开发者在HTML模板中直接声明表单控件和验证规则。然而，对于某些特定的验证需求，如密码确认、复杂的业务逻辑验证等，...
ng-remote-validate, Ajax &服务器端对Angularjs的验证 Angularjs#的#Ajax 验证ngRemoveValidate使你可以轻松地从服务器验证表单域代理数据。 例如注册表单可能需要在提交表单前检查输入的电子邮件是否已经注册。...
在上述提供的示例代码中，我们可以看到以下几点关于AngularJS表单验证的关键知识点： 1. 表单元素上使用`name`属性。这是创建模型控制器（`ng-model`）和视图之间的联系所必需的。通过为每个需要验证的元素提供一个...
总之，AngularJS自定义指令为我们提供了强大的能力，用于创建复杂的表单校验逻辑。通过结合正则表达式，我们可以轻松地实现http链接、纯数字等格式的验证，提升应用的用户体验。在实际项目中，可以根据需求不断扩展...
在AngularJS框架中，表单验证是开发过程中不可或缺的一部分，它确保用户输入的数据符合预设的规则和标准，从而提高应用程序的数据质量和用户体验。`ng-validators`是一个专门为AngularJS设计的自定义验证器库，它...