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 学习笔记(一)
Oct 13 Javascript
关于JavaScript的面向对象和继承有利新手学习
Jan 11 Javascript
深入理解javascript动态插入技术
Nov 12 Javascript
node.js学习之base64编码解码
Oct 21 Javascript
DropDownList控件绑定数据源的三种方法
Dec 24 Javascript
Bootstrap按钮组简单实现代码
Mar 06 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
May 17 Javascript
不得不看之JavaScript构造函数及new运算符
Aug 21 Javascript
纯js实现画一棵树的示例
Sep 05 Javascript
webpack4.x CommonJS模块化浅析
Nov 09 Javascript
jquery实现掷骰子小游戏
Oct 24 jQuery
JavaScript实现图片伪异步上传过程解析
Apr 10 Javascript
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
星际原理概述
2020/03/04 星际争霸
php中使用$_REQUEST需要注意的一个问题
2013/05/02 PHP
Yii配置文件用法详解
2014/12/04 PHP
php更新mysql后获取改变行数的方法
2014/12/25 PHP
php检查日期函数checkdate用法实例
2015/03/19 PHP
PHP登录验证码的实现与使用方法
2016/07/07 PHP
PHP实现将优酷土豆腾讯视频html地址转换成flash swf地址的方法
2017/08/04 PHP
javascript判断单选框或复选框是否选中方法集锦
2007/04/04 Javascript
javascript+dom树型菜单类,希望朋友们一起进步
2007/05/03 Javascript
javascript add event remove event
2008/04/07 Javascript
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
2009/12/04 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
2013/07/01 Javascript
js获取指定日期前后的日期代码
2013/08/20 Javascript
TypeError document.getElementById(...) is null错误原因
2015/05/18 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
2015/06/23 Javascript
Javascript 跨域知识详细介绍
2016/10/30 Javascript
JS触摸事件、手势事件详解
2017/05/04 Javascript
js 概率计算(简单版)
2017/09/12 Javascript
JS实现按钮添加背景音乐示例代码
2017/10/17 Javascript
详解vue-router 命名路由和命名视图
2018/06/01 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
2020/10/13 Javascript
使用pandas读取csv文件的指定列方法
2018/04/21 Python
Python3.5内置模块之random模块用法实例分析
2019/04/26 Python
解决pyinstaller打包发布后的exe文件打开控制台闪退的问题
2019/06/21 Python
python paramiko远程服务器终端操作过程解析
2019/12/14 Python
英国足球店:UK Soccer Shop
2017/11/19 全球购物
IdealFit官方网站:女性蛋白质、补充剂和运动服装
2019/03/24 全球购物
什么是lambda函数
2013/09/17 面试题
资源环境与城市管理专业推荐信
2013/11/30 职场文书
电子专业毕业生自我鉴定
2014/01/22 职场文书
文科生自我鉴定
2014/02/15 职场文书
爱国演讲稿500字
2014/05/04 职场文书
教师思想工作总结2015
2015/05/13 职场文书
《怀念母亲》教学反思
2016/02/19 职场文书
Java8 CompletableFuture 异步回调
2022/04/28 Java/Android
Win10开机修复磁盘错误怎么跳过?Win10关闭开机磁盘检查的方法
2022/09/23 数码科技