AngularJS实现表单验证功能  更新时间:2017年01月09日 09:06:22   作者:Zerone1993   这篇文章主要为大家详细介绍了AngularJS实现表单验证功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 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正文: 名字: angularJS双向绑定:{{name}} 表单输入信息校验 Email: 邮箱地址不合法! 数据校验结果:{{myForm01.myEmail01.$error.email}} ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error) Email: 状态 数据输入合法:{{myForm02.myEmail02.$valid}} 数据改变:{{myForm02.myEmail02.$dirty}} 触屏点击: {{myForm02.myEmail02.$touched}} ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类 输入你的名字: 效果: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。 您可能感兴趣的文章: 详解AngularJS实现表单验证 AngularJS实现表单验证 详解AngularJS中的表单验证(推荐) angular实现表单验证及提交功能 详细解读AngularJS中的表单验证编程 AngularJS表单验证功能 AngularJS 表单验证手机号的实例(非必填) AngularJS 表单验证 相关文章 深入讲解AngularJS中的自定义指令的使用 这篇文章主要介绍了深入讲解AngularJS中的自定义指令的使用,AngularJS是一款热门的JavaScript开发库,需要的朋友可以参考下 2015-06-06 angular select 默认值设置方法 下面小编就为大家带来一篇angular select 默认值设置方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-06-06 自学实现angularjs依赖注入 这篇文章主要为大家详细介绍了angularjs依赖注入的自己成果,如何实现angularjs依赖注入,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2016-12-12 AngularJs concepts详解及示例代码 本文主要介绍AngularJs concepts,这里整理了详细资料及简单示例代码来讲解相关知识,有学习这部分知识的朋友可以参考下 2016-09-09 AngularJS入门教程之更多模板详解 本文主要介绍AngularJS模板的资料知识,这里帮大家整理了详细的模版资料,及实现示例代码,帮助大家学习AngularJS的知识,有需要的小伙伴可以参考下 2016-08-08 AngularJS动态绑定ng-options的ng-model实例代码 本篇文章主要介绍了AngularJS动态绑定ng-options的ng-model实例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-06-06 angular2组件中定时刷新并清除定时器的实例讲解 今天小编就为大家分享一篇angular2组件中定时刷新并清除定时器的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-08-08 使用AngularJS对路由进行安全性处理的方法 这篇文章主要介绍了使用AngularJS对路由进行安全性处理的方法,AngularJS是一款高人气的JavaScript库,需要的朋友可以参考下 2015-06-06 简介AngularJS中使用factory和service的方法 这篇文章主要简单介绍了AngularJS中使用factory和service的方法,主要针对自定义工厂和服务的创建来讲,需要的朋友可以参考下 2015-06-06 AngularJS实现的2048小游戏功能【附源码下载】 这篇文章主要介绍了AngularJS实现的2048小游戏,可实现通过键盘W、S、A、D键控制上下左右移动进行游戏的功能,涉及AngularJS页面元素动态操作及数值运算等相关操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下 2018-01-01 最新评论

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实现表单验证
  • AngularJS实现表单验证
  • 详解AngularJS中的表单验证(推荐)
  • angular实现表单验证及提交功能
  • 详细解读AngularJS中的表单验证编程
  • AngularJS表单验证功能
  • AngularJS 表单验证手机号的实例(非必填)
张贴在3