教你用AngularJS框架一行JS代码实现控件验证效果

网络编程 2024/11/15 佚名

3 2 1

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

控件都是必输控件
都需要控制最大长度
第一次打开页面，控件不能显示为错误状态
输入内容再清空后，必输控件需要显示为错误状态
只有所有输入合法后，发布按钮才能变为可用状态
通过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