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内容

添加或者删除对应的样式*/ /*定义输入框不合法的默认背景颜色*/ input.ng-invalid { background-color: grey; }

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

HTML正文:

名字: angularJS双向绑定:{{name}}

表单输入信息校验


数据校验结果:{{myForm01.myEmail01.$error.email}}

ng-model 指令可以为应用数据提供状态值(invalid,error)

状态
数据输入合法:{{myForm02.myEmail02.$valid}}
数据改变:{{myForm02.myEmail02.$dirty}}
触屏点击: {{myForm02.myEmail02.$touched}}

ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类

效果

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

猜你在找的JavaScript相关文章