AngularJS：一行JS代码实现控件验证效果

如上图所示，我们需要实现如下这些验证功能：

通过AngularJS，我们可以很轻松的实现这些要求，只需要1行JS代码。UI样式这里采用的是Bootstrap。先上示例代码：

HTML

? ?
? ?
? ?
? ? <script src="/Scripts/angular.js">


? ?

? ? ? ?
? ? ? ?

? ? ? ? ? ?

? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? ? ? 您的称呼*
? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? ? ? 邮箱地址*
? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? ? ? 主题*
? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? ? ? 内容*
? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ?

? ? ? ? ? ?

? ? ? ?

? ?

JS代码（真的只有一行哟）

ContractCreateController.js

var ftitAppModule = angular.module('ftitApp', []);

这样就好啦。几个关键的地方解释一下：

更细节的技术问题请查看AngularJS的技术文档。

希望你喜欢，并分享我的工作~带你走近AngularJS系列：