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

更新时间：2014年06月23日 10:52:03 投稿：hebedich

简单来说Angular.js是google开发者设计和开发的一套前端开发框架，帮助你简化前端开发的负担。到底能简化到什么程度呢，今天我们来看下，一行代码实现控件验证效果，有木有吓尿？

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

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

您可能感兴趣的文章:

AngularJS

Angular2 组件交互实例详解
Angular2应用程序实际上是有很多父子组价组成的组件树，因此，了解组件之间如何通信，特别是父子组件之间，对编写Angular2应用程序具有十分重要的意义。下面通过本文给大家介绍Angular2 组件交互知识，感兴趣的朋友一起看看吧
2017-08-08
AngularJS入门教程之表单校验用法示例
这篇文章主要介绍了AngularJS表单校验用法,结合实例形式分析了AngularJS各种常见的表单校验功能及使用技巧,需要的朋友可以参考下
2016-11-11
angular仿支付宝密码框输入效果
本篇文章主要介绍了angular仿支付宝密码框输入效果，详细的介绍了使用ng写一个密码框格子支付模块，具有一定的参考价值，有兴趣的可以了解一下。
2017-03-03
Angular 5.0 来了! 有这些大变化
Angular 5.0 来了! 有这些重大变化,这篇文章就为大家介绍了Angular 5.0大变化，感兴趣的小伙伴们可以参考一下
2017-11-11
解决Angular4项目部署到服务器上刷新404的问题
今天小编就为大家分享一篇解决Angular4项目部署到服务器上刷新404的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
Angular 数据请求的实现方法
本篇文章主要介绍了Angular 数据请求的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05
angularjs2 ng2 密码隐藏显示的实例代码
本篇文章主要介绍了angularjs2 ng2 密码隐藏显示的实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-08-08
利用require.js与angular搭建spa应用的方法实例
这篇文章主要给大家介绍了关于利用require.js与angular搭建spa应用的方法实例，文中通过示例代码给大家介绍的非常详细，对大家的理解和学习具有一定的参考学习价值，需要的朋友们下面跟着小编来一起看看吧。
2017-07-07
AngularJS实现全选反选功能
这篇文章主要介绍了AngularJS实现全选反选功能，这里用到AngularJS四大特性之二----双向数据绑定，对angularjs实现全选反选相关知识感兴趣的朋友一起学习吧
2015-12-12
详解Angular16如何获取路由参数
这篇文章主要为大家介绍了Angular16如何获得路由参数的实现方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-07-07

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具