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


Posted in Javascript onJune 23, 2014

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

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

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

Javascript 相关文章推荐
jQuery 自动增长的文本输入框实现代码
Apr 02 Javascript
javascript数组去掉重复
May 12 Javascript
技术男用来对妹子表白的百度首页
Jul 23 Javascript
H5图片压缩与上传实例
Apr 21 Javascript
利用Three.js如何实现阴影效果实例代码
Sep 26 Javascript
Vue2.0用户权限控制解决方案的示例
Feb 10 Javascript
vue 指令之气泡提示效果的实现代码
Oct 18 Javascript
javascript中如何判断类型汇总
May 14 Javascript
JavaScript使用面向对象实现的拖拽功能详解
Jun 12 Javascript
微信小程序实现蒙版弹出窗功能
Sep 17 Javascript
微信用户访问小程序的登录过程详解
Sep 20 Javascript
Javascript Symbol原理及使用方法解析
Oct 22 Javascript
js自定义鼠标右键的实现原理及源码
Jun 23 #Javascript
js代码实现的加入收藏效果并兼容主流浏览器
Jun 23 #Javascript
用jquery的方法制作一个简单的导航栏
Jun 23 #Javascript
jquery的attr方法禁用表单元素禁用输入内容
Jun 23 #Javascript
JavaScript获取某年某月的最后一天附截图
Jun 23 #Javascript
一个判断抢购时间是否到达的简单的js函数
Jun 23 #Javascript
extjs_02_grid显示本地数据、显示跨域数据
Jun 23 #Javascript
You might like
调频问题解答
2021/03/01 无线电
php中关于普通表单多文件上传的处理方法
2011/03/25 PHP
PHP写的资源下载防盗链类分享
2014/05/12 PHP
推荐几个开源的微信开发项目
2014/12/28 PHP
php实现的rc4加密解密类定义与用法示例
2018/08/16 PHP
浅析PHP7 的垃圾回收机制
2019/09/06 PHP
不提示直接关闭网页窗口的JS示例代码
2013/12/17 Javascript
Jquery插件easyUi表单验证提交(示例代码)
2013/12/30 Javascript
jquery中get和post的简单实例
2014/02/04 Javascript
简单的jquery左侧导航栏和页面选中效果
2014/08/21 Javascript
jquery中trigger()无法触发hover事件的解决方法
2015/05/07 Javascript
使用AngularJS创建自定义的过滤器的方法
2015/06/18 Javascript
浅析Javascript中bind()方法的使用与实现
2016/05/30 Javascript
jQuery插件实现文件上传功能(支持拖拽)
2020/08/27 Javascript
Vue.js中用v-bind绑定class的注意事项
2016/12/13 Javascript
关于axios返回空对象的问题解决
2017/04/04 Javascript
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
2017/09/26 Javascript
canvas绘制爱心的几种方法总结(推荐)
2017/10/31 Javascript
vue+element tabs选项卡分页效果
2020/06/29 Javascript
Vue分页插件的前后端配置与使用
2019/10/09 Javascript
Python中的字符串替换操作示例
2016/06/27 Python
Python+Selenium+phantomjs实现网页模拟登录和截图功能(windows环境)
2019/12/11 Python
使用python 的matplotlib 画轨道实例
2020/01/19 Python
使用python 计算百分位数实现数据分箱代码
2020/03/03 Python
Django查询优化及ajax编码格式原理解析
2020/03/25 Python
Python批量安装卸载1000个apk的方法
2020/04/10 Python
python 获取字典键值对的实现
2020/11/12 Python
python实现启动一个外部程序,并且不阻塞当前进程
2020/12/05 Python
越南综合购物网站:Lazada越南
2019/06/10 全球购物
酒店员工职业生涯规划
2014/02/25 职场文书
推广活动策划方案
2014/08/23 职场文书
机关副主任个人四风问题整改措施
2014/09/26 职场文书
个人公司授权委托书范本
2014/10/12 职场文书
2014年应急管理工作总结
2014/11/26 职场文书
2014年妇幼保健工作总结
2014/12/08 职场文书
一文搞懂Redis中String数据类型
2022/04/03 Redis