教你用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 相关文章推荐
javascript 兼容FF的onmouseenter和onmouseleave的代码
Jul 19 Javascript
js trim函数 去空格函数与正则集锦
Nov 20 Javascript
JavaScript 基础篇(一)
Mar 30 Javascript
在javascript中执行任意html代码的方法示例解读
Dec 25 Javascript
Node.js中的缓冲与流模块详细介绍
Feb 11 Javascript
利用JavaScript阻止表单提交的两种方法
Aug 11 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
Sep 21 Javascript
Jquery表单验证失败后不提交的解决方法
Oct 18 Javascript
Bootstrap table使用方法总结
May 10 Javascript
JavaScript数据结构之单链表和循环链表
Nov 28 Javascript
JavaScript中.min.js和.js文件的区别讲解
Feb 13 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
Sep 17 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
PHP中将字符串转化为整数(int) intval() printf() 性能测试
2020/03/20 PHP
php使用Header函数,PHP_AUTH_PW和PHP_AUTH_USER做用户验证
2016/05/04 PHP
Some tips of wmi scripting in jscript (1)
2007/04/03 Javascript
javascript prototype,executing,context,closure
2008/12/24 Javascript
document.createElement()用法
2013/03/13 Javascript
jquery 无限级下拉菜单的简单实现代码
2014/02/21 Javascript
jQuery中data()方法用法实例
2014/12/27 Javascript
简单谈谈javascript中的变量、作用域和内存问题
2015/08/30 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
2016/09/19 Javascript
JavaScript实现汉字转换为拼音的库文件示例
2016/12/22 Javascript
微信小程序滚动Tab实现左右可滑动切换
2017/08/17 Javascript
node.js实现的装饰者模式示例
2017/09/06 Javascript
js判断传入时间和当前时间大小实例(超简单)
2018/01/11 Javascript
详解操作虚拟dom模拟react视图渲染
2018/07/25 Javascript
Bootstrap4 gulp 配置详解
2019/01/06 Javascript
微信小程序自定义多列选择器使用详解
2019/06/21 Javascript
jQuery实现轮播图源码
2019/10/23 jQuery
vue下canvas裁剪图片实例讲解
2020/04/16 Javascript
对vuex中store和$store的区别说明
2020/07/24 Javascript
Python使用装饰器进行django开发实例代码
2018/02/06 Python
Python队列RabbitMQ 使用方法实例记录
2019/08/05 Python
Python Web框架之Django框架文件上传功能详解
2019/08/16 Python
numpy求平均值的维度设定的例子
2019/08/24 Python
手机使用python操作图片文件(pydroid3)过程详解
2019/09/25 Python
Python 生成短8位唯一id实战教程
2021/01/13 Python
ESDlife健康生活易:身体检查预订、搜寻及比较
2019/05/10 全球购物
阿迪达斯印尼官方网站:adidas印尼
2020/02/10 全球购物
俄罗斯第一家多品牌在线奢侈品精品店:Aizel.ru
2020/09/06 全球购物
运动会通讯稿400字
2014/01/28 职场文书
新闻编辑自荐书范文
2014/02/12 职场文书
项目投资意向书
2014/04/01 职场文书
十佳家长事迹材料
2014/08/26 职场文书
劳动保障个人工作总结
2015/03/04 职场文书
幼儿园小班班务总结
2015/08/03 职场文书
2016年秋季运动会加油稿
2015/12/21 职场文书
动画电影《龙珠超 超级英雄》延期上映
2022/03/20 日漫