AngularJS实现表单手动验证和表单自动验证_AngularJS

来源：懂视网责编：小采时间：2020-11-27 21:47:06

AngularJS实现表单手动验证和表单自动验证_AngularJS

AngularJS实现表单手动验证和表单自动验证_AngularJS:AngularJS的表单验证大致有两种，一种是手动验证，一种是自动验证。一、手动验证所谓手动验证是通过AngularJS表单的属性来验证。而成为AngularJS表单必须满足两个条件： 1、给form元素加上novalidate=novalidate； 2、给form元素加上na

推荐度：

点击下载本文 文档为doc格式

导读AngularJS实现表单手动验证和表单自动验证_AngularJS:AngularJS的表单验证大致有两种，一种是手动验证，一种是自动验证。一、手动验证所谓手动验证是通过AngularJS表单的属性来验证。而成为AngularJS表单必须满足两个条件： 1、给form元素加上novalidate=novalidate； 2、给form元素加上na

AngularJS的表单验证大致有两种，一种是手动验证，一种是自动验证。
一、手动验证
所谓手动验证是通过AngularJS表单的属性来验证。而成为AngularJS表单必须满足两个条件：

1、给form元素加上novalidate="novalidate"；

2、给form元素加上name="theForm"，如下：




 
 
 
 



 
 
 Form Submitting

把AngularJS表单的所有属性都打印出来

{
 "$error": {
 "required": [
 {
 "$validators": {},
 "$asyncValidators": {},
 "$parsers": [],
 "$formatters": [
 null
 ],
 "$viewChangeListeners": [],
 "$untouched": true,
 "$touched": false,
 "$pristine": true,
 "$dirty": false,
 "$valid": false,
 "$invalid": true,
 "$error": {
 "required": true
 },
 "$name": "email",
 "$options": null
 }
 ]
 },
 "$name": "theForm",
 "$dirty": false,
 "$pristine": true,
 "$valid": false,
 "$invalid": true,
 "$submitted": false,
 "email": {
 "$validators": {},
 "$asyncValidators": {},
 "$parsers": [],
 "$formatters": [
 null
 ],
 "$viewChangeListeners": [],
 "$untouched": true,
 "$touched": false,
 "$pristine": true,
 "$dirty": false,
 "$valid": false,
 "$invalid": true,
 "$error": {
 "required": true
 },
 "$name": "email",
 "$options": null
 },
 "sex": {
 "$validators": {},
 "$asyncValidators": {},
 "$parsers": [],
 "$formatters": [],
 "$viewChangeListeners": [],
 "$untouched": true,
 "$touched": false,
 "$pristine": true,
 "$dirty": false,
 "$valid": true,
 "$invalid": false,
 "$error": {},
 "$name": "sex",
 "$options": null
 }
}

以上，凡是有name属性的input都被显示在上面。
在second.js文件中定义了module,controller以及提交表单的方法。

以上的表单验证方式好处是可控性强，但相对繁琐。
二、自动验证
AngularJS的另外一种表单验证方式是自动验证，即通过directive来实现，除了AngularJS自带的directive,还需要用到angular-auto-validate这个第三方module。
有关angular-auto-validate：
● 安装：npm i angular-auto-validate
● 引用：

● ladda属性值为bool值，true表示显示动态等待效果，false不显示动态等待效果，这里的submitting是scope中的一个属性
● data-style="expand-right"表示在按钮的右侧显示动态等待效果

再拿表单中的Age字段来说：

Age

其中,min, max为AgularJS的directive,而ng-min-err-type是angular-auto-validate的directive。这里遵循的惯例是ng-AngularJS表单验证的directive名称-err-type，而tooYoung和tooOld的作用是什么，又是在哪里用上了呢？
是在module层面用上了，定义在了form_validation_auto.js文件中。

以上，在run方法中使用angular-auto-validate的defaultErrorMessageResolver服务，对错误信息进行为了自定义。页面上的tooYoung和tooOld和这里的errorMessages['tooYoung']和errorMessages['badUsername']对应。

本文的全部内容就为大家介绍到这里，希望对大家学习AngularJS实现表单验证有所帮助。

AngularJS实现表单手动验证和表单自动验证_AngularJS

推荐度：

点击下载本文 文档为doc格式

标签：表单自动验证 angularjs

热门焦点

AngularJS实现表单手动验证和表单自动验证_AngularJS

AngularJS实现表单手动验证和表单自动验证_AngularJS

AngularJS实现表单手动验证和表单自动验证_AngularJS

最新推荐

猜你喜欢

热门推荐