相思资源网 Design By www.200059.com
如上图所示，我们需要实现如下这些验证功能：
控件都是必输控件
都需要控制最大长度
第一次打开页面，控件不能显示为错误状态
输入内容再清空后，必输控件需要显示为错误状态
只有所有输入合法后，发布按钮才能变为可用状态
通过AngularJS，我们可以很轻松的实现这些要求，只需要1行JS代码。UI样式这里采用的是Bootstrap。先上示例代码：
HTML。
<!DOCTYPE html> <html lang="zh-cn" ng-app="ftitApp"> <head> <meta charset="utf-8" /> <title>Demo</title> <link href="/Content/bootstrap.css" rel="stylesheet"/> <script src="/UploadFiles/2021-04-02/angular.js">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
相思资源网 Design By www.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com
暂无教你用AngularJS框架一行JS代码实现控件验证效果的评论...