AngularJs 表单校验

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

猜你喜欢