教你用AngularJS框架一行JS代码实现控件验证效果
程序员文章站
2022-03-20 18:24:50
如上图所示，我们需要实现如下这些验证功能：
控件都是必输控件
都需要控制最大长度
第一次打开页面，控件不能显示为错误状态
输入内容再清空后，必输控件需要显示为错...
如上图所示，我们需要实现如下这些验证功能：
控件都是必输控件
都需要控制最大长度
第一次打开页面，控件不能显示为错误状态
输入内容再清空后，必输控件需要显示为错误状态
只有所有输入合法后，发布按钮才能变为可用状态
通过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="/scripts/angular.js"></script>
</head>
<body>
<div class="container body-content">
<!-- 主要内容区域 -->
<div class="row main-content">
<div class="col-md-9">
<!-- 联系我们表单区域 -->
<form action="/contact/create" method="post" role="form" name="createcontactform" ng-controller="contactcreatecontroller">
<!-- username 您的称呼 -->
<div class="form-group has-feedback" ng-class="{'has-success' : !createcontactform.username.$pristine && createcontactform.username.$valid, 'has-error' : !createcontactform.username.$pristine && createcontactform.username.$invalid }">
<label for="username">您的称呼*</label>
<input type="text" class="form-control" ng-model="username" name="username" autofocus="" required ng-maxlength=30>
<div ng-show="!createcontactform.username.$pristine && createcontactform.username.$valid">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div ng-show="!createcontactform.username.$pristine && createcontactform.username.$invalid">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</div>
<!-- usermail 邮箱地址 -->
<div class="form-group has-feedback" ng-class="{'has-success' : !createcontactform.usermail.$pristine && createcontactform.usermail.$valid, 'has-error' : !createcontactform.usermail.$pristine && createcontactform.usermail.$invalid }">
<label for="usermail">邮箱地址*</label>
<input type="email" class="form-control" ng-model="usermail" name="usermail" required ng-maxlength=30>
<div ng-show="!createcontactform.usermail.$pristine && createcontactform.usermail.$valid">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div ng-show="!createcontactform.usermail.$pristine && createcontactform.usermail.$invalid">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</div>
<!-- subject 主题 -->
<div class="form-group has-feedback" ng-class="{'has-success' : !createcontactform.subject.$pristine && createcontactform.subject.$valid, 'has-error' : !createcontactform.subject.$pristine && createcontactform.subject.$invalid }">
<label for="subject">主题*</label>
<input type="text" class="form-control" ng-model="subject" name="subject" required ng-maxlength=100>
<div ng-show="!createcontactform.subject.$pristine && createcontactform.subject.$valid">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div ng-show="!createcontactform.subject.$pristine && createcontactform.subject.$invalid">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</div>
<!-- content 内容 -->
<div class="form-group has-feedback" ng-class="{'has-success' : !createcontactform.content.$pristine && createcontactform.content.$valid, 'has-error' : !createcontactform.content.$pristine && createcontactform.content.$invalid }">
<label for="content">内容*</label>
<textarea cols="4" rows="5" class="form-control" ng-model="content" name="content" required ng-maxlength=1000></textarea>
<div ng-show="!createcontactform.content.$pristine && createcontactform.content.$valid">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div ng-show="!createcontactform.content.$pristine && createcontactform.content.$invalid">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</div>
<!-- 提交按钮 -->
<div class="form-group">
<div ng-show="createcontactform.$valid">
<input type="image" src="/content/images/comment_publish_button.png" onsubmit="submit();" value="发布" ng-disabled='!createcontactform.$valid' />
</div>
<div ng-show="!createcontactform.$valid">
<img src="/content/images/invalid_publish_button.png" />
</div>
</div>
</form>
</div>
</div>
</div>
<script src="/scripts/ftit/contactcreatecontroller.js"></script>
</body>
</html>
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的技术文档。