脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-走进AngularJs(九)表单及表单验证，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 年底了越来越懒散，AngularJs的学习落了一段时间，博客最近也没更新。惭愧~前段时间有试了一下用yeoman构建Angular项目，感觉学的差不多了想做个项目练练手，谁知遇到了一系列问题。yeoman是基于node.js的一套工具包，由于我一直在windows下编程，而且node.js对于windows环境的支持也在慢慢加强，所以想尝试在windows下用yeoman跟搭建一个项目。过程远比想象的坎坷多了，各种报错，各种搜资料解决问题，最终还是无法解决一些编译出错，以失败告终，转战Linux。在此也提醒大家如果想在windows下使用yeoman，还是谨慎为好！
今天来学习一下一直被我忽视掉的表单验证。ng的强项是开发CRUD应用，也就是与用户操作多、交互比较频繁的应用。表单是与用户交互的一个重要角色，所以万万不能忽视。在学习之后发现这部分知识不仅仅是想象中的那么简单，比起其他特性，我们一直不怎么重视的表单验证，其实也可以做的很简单，而且易维护。下面就开始吧~
ng中的表单与Controller
看这个小标题也行你会差异，表单验证，怎么跟controller扯上关系了。ng中的form已经不同于我们平时用的form标签，做了增强。form是FormController的一个实例。如何理解这句话呢？想想我们使用ng-controller指令的情景：
复制代码
<p ng-controller="testC">
<input tyPE="test" ng-model="a" />
</p>
<scrITp>
function testC($scope){
//.............
}
</script>
复制代码
应用了ng-controller的p就是testC的一个实例，我们可以在模板中使用定义在$scopt上的任何属性和方法，而testC的定义也是由我们自己实现的。当我们使用<form>的时候也是这样的道理，FormController由ng为我们定义好了，有一系列属性和方法提供给我们完成验证工作，form实例通过name属性来进行标识，我们可以通过此标识来访问form实例的属性和方法，如：
<form name=";myform">
{{myform.$valid}}
</form>
form提供的属性都是用来表示表单的验证状态的，包括：$PRistine(表单没有填写记录)、$dirty(表单有填写记录)、$valid(通过验证)、$invalid(未通过验证)、$error(验证错误信息)。除$error外，前四个的值为true或false表示相应的状态。$error的值为一个js对象，包含了以下验证内容的状态：
max
maxlength
min
minlength
number
pattern
required
url
这些内容我们会在稍后的例子中看到。FormController还提供了一些方法，我们一般不手工调用它们，都是系统自己调用。
表单元素，如input、checkbox、radio等也不是普通的表单元素了，它们通通是NgModelController的实例。与form一样，也是通过name属性来标识。FormController拥有的那五个属性，NgModelController也同样拥有，除此之外，还有许多额外的属性和方法，我们稍后也在示例中展示，可参考官方文档：
还有一个特性需要了解，一个表单中的表单元素，会作为这个form的属性自动加在上面，通过name标识就可以访问到，如：
<form name="myform">
<input type="text" name="myname" />
{{myform.myname.$valid}}
</form>
ng内置的验证规则
ng框架提供了非常方便的验证机制，你只需要在标签上加点指令，像使用HTML5提供的验证那样，然后在css中根据规则定义好正确/错误的样式就OK了，例如我们要让一个文本框为必填项，使用required：
<form name="myform novalidate>
<input type="text" ng-model="a" required />
</form>
有几点需要注意：
在<form>上加了一个novalidate，用来禁止掉浏览器默认的验证行为，因为ng已经对HTML5的几种表单新特性做了兼容处理。
表单元素必须有ng-model，否则无法触发验证
在css中分别定义.ng-pristine、.ng-valid、.ng-invalid、.ng-dirty这四种样式，ng会根据相应的状态自动加上样式。
这部分还是相当简单的，下面我们写例子来测一下这几种验证机制，HTML代码如下：
复制代码
<p ng-app="MyApp">
<p ng-controller="testC">
<form name="myform" novalidate>
required: <input type="text" name="test1" ng-model="test1" required><br />
ng-minlength(3): <input type="text" name="test2" ng-model="test2" ng-minlength="3"><br />
ng-maxlength(10): <input type="text" name="test3" ng-model="test3" ng-maxlength="10"><br />
ng-pattern(/[a-f]/): <input type="text" name="test4" ng-model="test4" ng-pattern="/[a-f]/"><br />
type="number"(2-8): <input type="number" name="test5" max="8" min="2" ng-model="test5"><br />
type="url": <input type="url" name="test6" ng-model="test6"><br />
type="email": <input type="email" name="test7" ng-model="test7"><br />
</form>
<p>
<h2>表单验证结果：</h2>
myform.$invalid : {{myform.$invalid}}<br />
myform.$valid : {{myform.$valid}}<br />
myform.$pristine : {{myform.$pristine}}<br />
myform.$dirty : {{myform.$dirty}}<br />
myform.$error : {{myform.$error}}<br />
<h2>表单项验证结果</h2>
required:<br />
myform.test1.$invalid : {{myform.test1.$invalid}}<br />
myform.test1.$valid : {{myform.test1.$valid}}<br />
myform.test1.$pristine : {{myform.test1.$pristine}}<br />
myform.test1.$dirty : {{myform.test1.$dirty}}<br />
myform.test1.$error : {{myform.test1.$error}}<br />
myform.test2.$error : {{myform.test2.$error}}<br />
</p>
</p>
</p>
复制代码
CSS代码，为不同的状态设置不同的背景色：
复制代码
input.ng-pristine {
background-color: white;
}
input.ng-dirty {
background-color: lightyellow;
}
input.ng-valid {
background-color: lightgreen;
}
input.ng-invalid {
background-color: pink;
}
复制代码
js代码，进行controller的初始化：
复制代码
VAR app = angular.module('MyApp',[]);
app.controller('testC',function($scope){
$scope.test1='';
$scope.test2='';
$scope.test3='';
$scope.test4='';
$scope.test5='';
$scope.test6='';
$scope.test7='';
});
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-走进AngularJs(九)表单及表单验证全部内容，希望文章能够帮你解决javascript代码实例教程-走进AngularJs(九)表单及表单验证所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。