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
相关推荐
NULL 博文链接：https://bijian1013.iteye.com/blog/2392684
主要介绍了AngularJs表单校验功能实例代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下
使用angularJS完成表单验证功能
本文是对AngularJS表单验证，手动验证或自动验证的讲解，对学习JavaScript编程技术有所帮助，感兴趣的小伙伴们可以参考一下
本文实例讲述了AngularJS表单校验用法。分享给大家供大家参考，具体如下： 表单数据的校验对于提高WEB安全性意义不大，因为服务器接收到的请求不一定来自我们的前端页面，有可能来自别的站点，黑客可以自己做一个...
HTML5原生的表单校验属性（必填，长度限制，取值间隔，正则表达式等等）可以满足普通的校验需求，但是有些场景必须用到自定义校验，比如注册时的密码确认，有比对关系的时间/数值选择， 需要到请求到服务端取值验证...
ng-remote-validate, Ajax &服务器端对Angularjs的验证 Angularjs#的#Ajax 验证ngRemoveValidate使你可以轻松地从服务器验证表单域代理数据。 例如注册表单可能需要在提交表单前检查输入的电子邮件是否已经注册。...
本篇文章详细的介绍了AngularJS表单和输入验证实例， AngularJS表单可以提供验证功能。有需要的可以了解一下。
主要介绍了AngularJS学习笔记之表单验证功能,结合实例形式分析了AngularJS针对表单的校验、监控等相关操作技巧,需要的朋友可以参考下
本篇文章主要介绍了Angularjs使用指令做表单校验的方法，详细的介绍了用指令做校验的方法，具有一定的参考价值，有兴趣的可以了解一下。
ng验证器 AngularJS 表单验证器
AngularJS表单验证功能实现代码： ng-model的作用： 1.ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定 2.双向绑定，在修改输入域的值时， AngularJS 属性的值也将修改 3.数据校验 4.ng-model 指令...
本文实例为大家分享了AngularJS实现表单验证功能的具体代码，供大家参考，具体内容如下 <!--实例解析 ng-app 指令定义了 AngularJS 应用。 ng-controller 指令定义了应用控制器。 ng-model 指令绑定了两个 input...
表单创建一个有效、引人注目的数据输入体验。Angular表单协调一组数据绑定控件，跟踪变更。验证输入的有效性，并且显示错误信息。 接下来，主要内容有： 1、使用组件和模板构建Angular表单； 2、用ngModel创建数据...
在ng中，针对表单和空间提供了属性，用于验证控件交互的状态 布尔类型： ng-valid 表单通过验证时设置 ng-invalid 表单未通过验证时设置 ng-pristine 表单没有改动时设置 ng-dirty 表单有改动时设置 对象：...
主要介绍了AngularJS自定义表单验证功能,结合完整实例形式详细分析了AngularJS实现表单验证的相关指令、模型绑定、数据验证等操作技巧,需要的朋友可以参考下