AngularJS实现表单验证功能

标签:活动介绍    日期:2018-04-09 12:35    录入:美娱国际平台注册    浏览:

  

[AngularJS,表单验证]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 类

  
  输入你的名字:  
  
  
  

效果:  
  

  

  

  

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

  

★★★小编:美娱国际 整理文章,欢迎大家转载 ★★★
相关文章阅读