简单来说Angular.js是google开发者设计和开发的一套前端开发框架，帮助你简化前端开发的负担。到底能简化到什么程度呢，今天我们来看下，一行代码实现控件验证效果，有木有吓尿？
如上图所示，我们需要实现如下这些验证功能：
控件都是必输控件
都需要控制最大长度
第一次打开页面，控件不能显示为错误状态
输入内容再清空后，必输控件需要显示为错误状态
只有所有输入合法后，发布按钮才能变为可用状态
通过AngularJS，我们可以很轻松的实现这些要求，只需要1行JS代码。UI样式这里采用的是Bootstrap。先上示例代码：
HTML。
<title>Demo</title> <div class="container body-content"> <!-- 主要内容区域 --><div class="row main-content"> <div class="col-md-9"> <!-- 联系我们表单区域 --> <!-- UserName 您的称呼 --><div class="form-group has-feedback"> <label for="UserName">您<strong style="color:transparent">来源gaodai#ma#com搞@@代~&码网</strong>的称呼*</label><div> <span class="glyphicon glyphicon-ok form-control-feedback"></span></div><div> <span class="glyphicon glyphicon-remove form-control-feedback"></span></div></div><!-- UserMail 邮箱地址 --><div class="form-group has-feedback"> <label for="UserMail">邮箱地址*</label><div> <span class="glyphicon glyphicon-ok form-control-feedback"></span></div><div> <span class="glyphicon glyphicon-remove form-control-feedback"></span></div></div><!-- Subject 主题 --><div class="form-group has-feedback"> <label for="Subject">主题*</label><div> <span class="glyphicon glyphicon-ok form-control-feedback"></span></div><div> <span class="glyphicon glyphicon-remove form-control-feedback"></span></div></div><!-- Content 内容 --><div class="form-group has-feedback"> <label for="Content">内容*</label><textarea cols="4" rows="5" class="form-control" name="Content"></textarea><div> <span class="glyphicon glyphicon-ok form-control-feedback"></span></div><div> <span class="glyphicon glyphicon-remove form-control-feedback"></span></div></div><!-- 提交按钮 --><div class="form-group"> <div> </div><div> </div></div></div></div></div>
JS代码（真的只有一行哟）
ContractCreateController.js
var ftitAppModule = angular.module('ftitApp', []);
这样就好啦。几个关键的地方解释一下：
ng-class：这个标签用来控制class的值。例如ng-class=”{‘has-success’ : !createContactForm.Content.$pristine}的意思就是，如果!createContactForm.Content.$pristine的值为true，class的值就为has-success。
ng-show：控制是否显示该控件。
createContactForm.$valid：全部验证通过后，值为true，否则为false
createContactForm.Content.$valid：标识Content控件是否通过验证，通过为true，否则为false
createContactForm.Content.$pristine：标识Content控件是否从未输入过。从未输入为true，否则为false
更细节的技术问题请查看AngularJS的技术文档。
以上就是教你用AngularJS框架一行JS代码实现控件验证效果的详细内容，更多请关注gaodaima搞代码网其它相关文章！
转载请注明原文链接：教你用AngularJS框架一行JS代码实现控件验证效果
