AngularJS实现表单验证功能


Posted in Javascript onJanuary 09, 2017

AngularJS表单验证功能实现代码:

ng-model的作用:

1.ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定
2.双向绑定,在修改输入域的值时, AngularJS 属性的值也将修改
3.数据校验
4.ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error)
5.ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类

css内容:

/*angularJS会根据表单的状态进行添加或者删除对应的样式*/
/*定义输入框不合法的默认背景颜色*/
input.ng-invalid {
  background-color: grey;
}

/*输入框数据合法的默认背景颜色*/
input.ng-valid {
  background-color: yellow;
}

HTML正文:

<body ng-app="myApp">
<div ng-controller="myCtrl">
 <!-- 将表单输入域的值与angularJS的变量绑定 -->
  名字: <input ng-model="name"><br>
 angularJS双向绑定:{{name}}
</div>

<hr>
<p>表单输入信息校验</p>
<form name="myForm01">
  Email:<input type="email" name="myEmail01" ng-model="text">
  <!-- ng-show:类似avalon的ms-if的用法,如果校验不通过则返回true,显示提示内容,数据校验不太精确 -->
  <span ng-show="myForm01.myEmail01.$error.email" style="color: red">邮箱地址不合法!</span><br>
    数据校验结果:<span>{{myForm01.myEmail01.$error.email}}</span>
</form>

<hr>
<p>ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error)</p>
<form name="myForm02" ng-init="myText='test@qq.com'">
 Email:<input type="email" name="myEmail02" ng-model="myText" required></p> <!-- required标识不能为空,否则不合法 -->
 <h5>状态</h5>
  <!-- 通过识别表单的email控件按照默认的规则进行校验 -->
  数据输入合法:{{myForm02.myEmail02.$valid}}<br> 
  数据改变:{{myForm02.myEmail02.$dirty}}<br>
  触屏点击: {{myForm02.myEmail02.$touched}}
</form>

<hr>
<p>ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类</p>
<form name="myForm03">
  输入你的名字:<input name="myName" ng-model="text" required>
</form>

效果:

AngularJS实现表单验证功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery入门问答 整理的几个常见的初学者问题
Feb 22 Javascript
JQuery.Ajax之错误调试帮助信息介绍
Jul 04 Javascript
jquery选择器之层级过滤选择器详解
Jan 27 Javascript
JavaScript实现MIPS乘法模拟的方法
Apr 17 Javascript
用JavaScript实现页面重定向功能的教程
Jun 04 Javascript
Bootstrap实现响应式导航栏效果
Dec 28 Javascript
玩转JavaScript OOP - 类的实现详解
Jun 08 Javascript
Bootstrap源码解读导航(6)
Dec 23 Javascript
JavaScript ES6中export、import与export default的用法和区别
Mar 14 Javascript
jQuery实现鼠标经过显示动画边框特效
Mar 24 jQuery
深入理解Vue官方文档梳理之全局API
Nov 22 Javascript
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
AngularJS表单基本操作
Jan 09 #Javascript
AngularJS Controller作用域
Jan 09 #Javascript
详解JavaScript树结构
Jan 09 #Javascript
angular分页指令操作
Jan 09 #Javascript
jquery.zclip轻量级复制失效问题
Jan 08 #Javascript
JavaScript &amp; jQuery完美判断图片是否加载完毕
Jan 08 #Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
Jan 08 #Javascript
You might like
利用static实现表格的颜色隔行显示
2006/10/09 PHP
PHP在获取指定目录下的目录,在获取的目录下面再创建文件,多平台
2011/08/03 PHP
phplist及phpmailer(组合使用)通过gmail发送邮件的配置方法
2016/03/30 PHP
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
jquery实现心算练习代码
2010/12/06 Javascript
javascript对数组的常用操作代码 数组方法总汇
2011/01/27 Javascript
EditPlus注册码生成器(js代码实现)
2013/03/25 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
2013/11/19 Javascript
详解jQuery中的事件
2016/12/14 Javascript
JavaScript模板引擎Template.js使用详解
2016/12/15 Javascript
浅谈 Vue v-model指令的实现原理
2017/06/08 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
2017/09/27 Javascript
vue watch深度监听对象实现数据联动效果
2018/08/16 Javascript
js字符串倒序的实例代码
2018/11/30 Javascript
js如何获取图片url的Blob值并预览示例代码
2019/03/07 Javascript
vue.js实现备忘录demo
2019/06/26 Javascript
[07:01]DOTA2-DPC中国联赛正赛 Aster vs Magma 3月5日 赛后选手采访
2021/03/11 DOTA
Python中偏函数用法示例
2018/06/07 Python
Python unittest 简单实现参数化的方法
2018/11/30 Python
在win10和linux上分别安装Python虚拟环境的方法步骤
2019/05/09 Python
Python依赖包迁移到断网环境操作
2020/07/13 Python
python中@contextmanager实例用法
2021/02/07 Python
HTML5的结构和语义(2):结构
2008/10/17 HTML / CSS
HTML5 语音搜索(淘宝店语音搜素)
2013/01/03 HTML / CSS
BRASTY捷克:购买香水、化妆品、手袋和手表
2017/07/12 全球购物
美国亚洲时尚和美容产品的一站式网上商店:Stylevana
2019/09/05 全球购物
10条PHP编程习惯
2014/05/26 面试题
怎样创建、运行java程序
2014/08/01 面试题
生物化工工艺专业应届生求职信
2013/10/08 职场文书
田径运动会开幕式及主持词
2014/03/28 职场文书
大学生活自我评价
2014/04/09 职场文书
工伤事故赔偿协议书
2014/04/15 职场文书
教师师德师风自我剖析材料
2014/09/29 职场文书
2015年创先争优活动总结
2015/03/27 职场文书
Redis高级数据类型Hyperloglog、Bitmap的使用
2021/05/24 Redis
Python利用FlashText算法实现替换字符串
2022/03/31 Python