AngularJS学习笔记之表单验证功能实例详解

本文实例讲述了AngularJS学习笔记之表单验证功能。分享给大家供大家参考,具体如下:

创新互联长期为数千家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为石龙企业提供专业的成都网站设计、做网站,石龙网站改版等技术服务。拥有10年丰富建站经验和众多成功案例,为您定制开发。

一、执行基本的表单验证



  
    
    表单
    
    
    
    
  
  
    
message:{{message}}
valid:{{myForm.$valid}}

在上述例子中,该HTML文档被浏览器加载时的初始状态是:有三个input元素以及一个被禁用且无法单击的ok按钮,当在文本框中输入值并且勾选了复选框之后,按钮将变为可用,从而允许用户提交表单。

1、增加表单元素

(1)首先需要在form上设置一个name属性
(2)需要给表单增添novalidate属性,该属性用于告诉浏览器不要自己校验表单,从而允许AngularJS不受干扰的工作
(3)ng-submit指令为表单提交事件指定一个自定义的响应行为,将在用户提交表单时触发

2、使用校验属性

(1)为各个想要验证的元素添加name属性,这样可以访问到Angularjs所提供的各种特殊的变量
(2)设置type属性,这个属性指定了input元素将要接收的数据类型,这些类型告诉angularjs需要什么样的校验
(3)指定required属性,这个属性指定用户必须为待校验的表单提供一个输入值
(4)在本例中input元素都使用ng-model指令来设置隐式定义的newUser对象的一个属性

3、监控表单的有效性

AngularJS中用来替换标准表单元素的指令定义了一些特殊的变量,可以用来检查表单中各个元素或整个表单的有效性状态。

$pristine:如果用户没有与元素/表单产生交互,则返回true
$dirty:如果用户与元素/表单产生过交互,则返回true
$valid:当元素/表单内容的校验结果为有效时则返回true
$invalid:当元素/表单内容的校验结果为无效时则返回true
$error:提供校验错误的详情信息

二、提供表单校验反馈信息

在上面的例子中展示的效果是比较简单的,ok按钮将一直被禁用,直到所有的input元素可用,以阻止用户输入错误格式的或未填完的数据。在接下来我们将演示AngularJS为报告实时的校验信息

1、使用css提供校验反馈信息

ng-pristine:用户未曾交互过的元素被添加到这个类
ng-dirty:用户曾经交互过的元素被添加到这个类
ng-valid:校验结果为有效的元素在这个类中
ng-invalid:校验结果为无效的元素在这个类中

下面我们来看具体用法:



  
    
    表单
    
    
    
    
    
  
  
    
message:{{message}}
valid: {{myForm.$valid}}

在上述例子中,我们定义了四个样式,头两个样式用于选择属于ng-dirty类成员的元素,仅在用户与之交互后应用到相应元素上。内容有效的元素是ng-valid类的成员,会被渲染为淡绿色背景,内容无效的元素是ng-invalid类的成员,会被渲染为淡粉色背景

2、使用特殊变量来提供反馈信息



  
    
    表单
    
    
    
    
    
  
  
    
please enter a valid email address please enter a value

在本例中新增了一个新的div元素用于给用户显示校验提示信息,新的div元素的可见性是受ng-show指令控制的,将会在input元素被输入值,且输入值未通过校验时显示该元素。这里是联合使用form元素的name值和input的name值来访问input元素的。在这个例子中,我们使用特殊校验变量和其他指令联合使用以增强用户体验。但是这样可能会使页面增加大量的相同冗余信息的元素,接下来我们做简化



  
    
    表单
    
    
    
    
    
  
  
    
{{getError(myForm.userEmail.$error)}}

更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。


网页标题:AngularJS学习笔记之表单验证功能实例详解
网页地址:http://scyanting.com/article/pjpscg.html