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扩展自写的 UI导航
Jan 13 Javascript
js post提交调用方法
Feb 12 Javascript
一个通过script自定义属性传递配置参数的方法
Sep 15 Javascript
javascript性能优化之事件委托实例详解
Dec 12 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
Jun 26 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
Aug 15 Javascript
babel基本使用详解
Feb 17 Javascript
基于js中this和event 的区别(详解)
Oct 24 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
Mar 13 Javascript
vue项目中播放rtmp视频文件流的方法
Sep 17 Javascript
JS创建自定义对象的六种方法总结
Dec 15 Javascript
微信小程序input抖动问题的修复方法
Mar 03 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
php网页标题中文乱码的有效解决方法
2014/03/05 PHP
一个php生成16位随机数的代码(两种方法)
2014/09/16 PHP
PHP中shuffle数组值随便排序函数用法
2014/11/21 PHP
PHP ADODB生成HTML表格函数rs2html功能【附错误处理函数用法】
2018/05/29 PHP
Date对象格式化函数代码
2010/07/17 Javascript
在JavaScript中实现类的方式探讨
2013/08/28 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
2015/04/01 Javascript
javascript+ajax实现产品页面加载信息
2015/07/09 Javascript
基于jQuery滑动杆实现购买日期选择效果
2015/09/15 Javascript
javascript实现瀑布流动态加载图片原理
2016/08/12 Javascript
js判断浏览器是否支持严格模式的方法
2016/10/04 Javascript
Easyui的组合框的取值与赋值
2016/10/28 Javascript
Three.js利用顶点绘制立方体的方法详解
2017/09/27 Javascript
浅谈React碰到v-if
2018/11/04 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
2019/04/11 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
2019/10/24 Javascript
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
使用p5.js临摹动态图片
2019/11/04 Javascript
Vue中错误图片的处理的实现代码
2019/11/07 Javascript
JavaScript中的相等操作符使用详解
2019/12/21 Javascript
[01:34]DOTA2 7.22版本新增神杖效果一览(敏捷英雄篇)
2019/05/28 DOTA
phpsir 开发 一个检测百度关键字网站排名的python 程序
2009/09/17 Python
在Python中使用next()方法操作文件的教程
2015/05/24 Python
Python3.7 基于 pycryptodome 的AES加密解密、RSA加密解密、加签验签
2019/12/04 Python
Python实现简单猜数字游戏
2021/02/03 Python
Myprotein中国网站:欧洲畅销运动营养品牌
2021/02/11 全球购物
一套英文Java笔试题面试题
2016/04/21 面试题
日语翻译个人求职的自我评价
2013/10/14 职场文书
销售自荐信
2013/10/22 职场文书
决定成败的关键——创业计划书
2014/01/24 职场文书
单位创先争优活动方案
2014/01/26 职场文书
保险公司开门红口号
2014/06/21 职场文书
解除劳动合同协议书
2014/09/17 职场文书
护士自荐信范文(2016推荐篇)
2016/01/28 职场文书
CocosCreator如何实现划过的位置显示纹理
2021/04/14 Javascript
使用 Apache Superset 可视化 ClickHouse 数据的两种方法
2021/07/07 Servers