AngularJs 表单校验

阅读更多

    AngularJS实现了数据双向绑定，改变了html格局下需手写大段js来处理动态数据问题。

    引入AngularJS，然后在应用AnglarJS的外层标签中添加ng-app="xxApp"，这样该标签及其中内容被声明为了xxApp。类似的通过ng-controller标签声明controller，controller需属于某个app中，因此应该在ng-app标签之内（可以在同一个标签上），对应mvc中的controller层。在controller中可以包含多个model，通过添加ng-model来进行数据绑定。一个简单的form表单如下所示

	

		

			商品名称：
			
			不能为空
			长度不足3位
			已存在
		
		

			关键词（通过空格分割）：
			
		
		
		
	

 
 其中ng-submit表示表单的提交方法为processForm()，而required用于非空校验、ng-minlength用于最短长度校验、name-validation则是自定义的校验（需要注册nameValidation方法）。再看一下脚本

 第一行将刚才声明的app注册为AngularJS中的module对象，第二行则是注册controller，并声明了该作用域下的js方法，app.directive('nameValidation', function($http) {则是为app注册了自定义的校验方法。例中方法为后台校验名称是否重复ctrl.$setValidity('exist',!data)方法将校验错误定义为exist。 formName.inputfieldName.$error.validatorName 可以取到某字段的某个校验的结果。

 

 

笔者遇到的几个错误：

1. 一开始将input的name设置为了“name”，然后ng-show="form.name.$error.required"没有起作用，后来改为了其它的名称才生效，说明form存在固有属性为name，导致语义出错。
2. 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