AngularJS表单和控件可以提供验证功能，并对用户输入的非法数据进行警告。

注意：客户端的验证不能确保用户输入数据的安全，所以服务端的数据验证也是必须的。

1、超文本标记语言控件

以下超文本标记语言输入元素被称为超文本标记语言控件：输入元素、选择元素、按钮元素、文本区元素。

2、超文本标记语言表单

AngularJS表单是输入控件的集合HTML。表单通常与超文本标记语言控件同时存在。

！DOCTYPE html html head meta charset=' utf-8 '/title anglarjs/title script src=' http : js/angular。量滴js ' type=' text/JavaScript ' charset=' utf-8 '/script/head body div ng-app=' myApp ' ng-controller=' form ctrl ' form novalidate First name 3360 br输入类型=' text ' ng-model=' user。名”br姓3360 br输入app.controller('formCtrl '，function($ scope){ $ scope。master={名字： ' John '，姓氏： ' Doe ' }；$ scope。reset=function(){ $ scope。用户=角度。复制($ scope)。大师)；};$ scope。reset()；});/脚本/正文/html

3、输入验证

AngularJS表单和控件可以提供验证功能，并对用户输入的非法数据进行警告。客户端的验证不能确保用户输入数据的安全，所以服务端的数据验证也是必须的。

！DOCTYPE html html head meta charset=' utf-8 '/title anglarjs/title script src=' http : js/angular。量滴js ' type=' text/JavaScript ' charset=' utf-8 '/script/head body H2验证实例/h2表单ng-app=' myApp ' ng-controller=' validateCtrl ' name=' my form ' novalidate p用户名：输入类型=“文本”名称='user' ng-model='user '必需span style=' color : red ' ng-show='我的表单。用户。$弄脏我的表格。用户。$无效我的表格。用户。$错误。“必需”用户名是必须的/span /span /p邮箱：输入类型='电子邮件'名称='email' ng-model='email '必需span style=' color : red ' ng-show='我的表单。电子邮件。$弄脏我的表格。电子邮件。$无效我的表格。电子邮件。$错误。“必需”邮箱是必须的/span span ng-show='我的表单。电子邮件。$错误。电子邮件非法的邮箱地址/span /span /p输入类型='提交' ng-disabled='我的表单。用户。$弄脏我的表格。用户。$无效| |我的表单。电子邮件。$弄脏我的表格。电子邮件。$无效/p/表单脚本var app=angular.module('myApp '，[])；app.controller('validateCtrl '，函数($ scope){ $ scope。用户='无名氏'；$ scope。email='[email protected]'；});/脚本/正文/html

AngularJS ng-模型指令用于绑定输入元素到模型中。模型对象有两个属性：用户和电子邮件。我们使用了尼日利亚显示指令，颜色：红色在邮件是$脏或$无效才显示

没用初始值的输入验证：注意ng-app=' '，ng-app有值就必须连接到代码模块，利用角度模块函数来创建模块。

！DOCTYPE html html head meta charset=' utf-8 '/title anglarjs/title script src=' http : js/angular。量滴js ' type=' text/JavaScript ' charset=' utf-8 '/script/head body H2验证实例/H2表格ng-app=' name=' my form ' novalidate p用户名：输入类型=“文本”名称='user' ng-model='user '必需span style=' color : red ' ng-show='我的表单。用户。$弄脏我的表格。用户。$无效我的表格。用户。$错误。“必需”用户名是必须的/span /span /p邮箱：输入类型='电子邮件'名称='email' ng-model='email '必需span style=' color : red ' ng-show='我的表单。电子邮件。$弄脏我的表格。电子邮件。$无效我的表格。电子邮件。$错误。“必需”邮箱是必须的/span span ng-show='我的表单。电子邮件。$错误。电子邮件非法的邮箱地址输入类型='提交' ng-disabled='我的表单。用户。$弄脏我的表格。用户。$无效| |我的表单。电子邮件。$弄脏我的表格。电子邮件。$无效/p/表单/正文/html

4、ng-禁用实例

！doctype html html ng-app=' MyApp ' head script src=' http : js/angular。量滴js '/脚本/头体div ng-Controller=' Controller '表单名称=' form '类=' CSS-form ' novalidate名称：输入类型=' text ' ng-model=' user。name ' name=' uName '必填/br/电子邮件：输入类型=' email ' ng-model=' user。email ' name=' uEmail '/span span ng-show='表单。uemail。$错误。电子邮件这不是有效的电子邮件/span /div性别：br/输入类型='radio' ng-model='user.gender '值='男'/男输入类型='radio' ng-model='user.gender '值='女/femalebr/输入类型=' checkbox ' ng-model=' user。“同意”名称='用户同意'必填/我同意：输入ng-show='user.agree '类型=' text ' ng-model=' user。“同意签字”必填/div ng-show='！user.agree ||！"用户。协议设计"请同意并签名/div br/！-ng-禁用为真实的时禁止使用，ng-禁用实时监控应用程序-button ng-click=' RESET()' ng-disabled=' isUnchanged(用户)' RESET/button ng-click=' update(用户)' ng-disabled='表单$无效|| isUnchanged(用户)' SAVE/按钮/表单/div脚本类型=' text/JavaScript ' var app=angular。模块(' MyApp '，[])；应用控制器(“控制器”)，函数($ scope){ $ scope。master={ }；$scope.update=function(用户){ $scope.master=$scope.copy(用户);};$ scope。reset=function(){ $ scope。用户=角度。复制($ scope)。大师)；};$ scope.isUnchanged=函数（用户){ //判断用户和$scope.master是否相等，相等返回没错，否则返回错误的返回angular.equals(user，$ scope。大师)；};$ scope。reset()；});/脚本/正文/html

5、ng-提交实例

html ng-app=' TestFormModule ' head meta http-equiv=' content-type ' content=' text/html；charset=utf-8 '/script src=' http : js/angular。量滴js '/脚本/头体！提交绑定表单提交事件-表单名称=' my form ' ng-submit=' save()' ng-controller=' TestFormModule '输入名称='用户名'类型='text' ng-model='user.userName '必填/输入名称='密码'类型=' password ' ng-model=' user。“密码”必填/br /输入类型='submit' ng-disabled='myForm .$无效的//表单/正文脚本类型=' text/JavaScript ' var app=angular。模块(' TestFormModule '，[])；app.controller('TestFormModule '，函数($ scope){ $ scope。用户={用户名： '山水子农，密码： ' ' }；$ scope。save=function(){控制台。日志('保存数据中.');} });/脚本/html

6、最大长度和最小长度实例

！DOCTYPE html html head meta charset=' UTF-8 '脚本src=' http : js/angular。js ' type=' text/JAVAScript ' charset=' utf-8 '/脚本标题表单验证/title/head body ng-app=' myApp ' div ng-controller=' myCtrl '表单名称=' form '标签为=' maxlength '设置一个maxlength :/标签输入类型=' number ' ng-model=' maxlength ' id=' maxlength ' br label for=' min length '设置一个min length :/标签输入类型=' number ' ng-model=' min length '/brhr标签为=' input '此输入受当前最大长度和=代码{ { form。文字。$ valid } }/codebr文本模型=code { { text model } }/code brhr标签为=' input '此输入受到当前最大长度和minlength: /labelbr输入类型的限制=' number ' ng-model=' number model ' id=' number ' name=' number ' ng-maxlength=' maxlength ' ng-min length=' min length '/br number输入有效吗？=代码{ { form。号码。$ valid } }/codebr number model=code { { number model } }/code/form/div script type=' text/JavaScript ' var app=angular。模块(' myApp '，[])；app.controller('myCtrl '，函数($ scope){ $ scope。最大长度=8；$ scope。最小长度=4；});/脚本/正文/html

7、ng级实例

！DOCTYPE html html head meta charset=' UTF-8 '脚本src=' http : js/angular。js ' type=' text/JAVAScript ' charset=' utf-8 '/脚本标题表单验证/title style type='text/css ' .删除了{ text-decoration : line-through；} .bold { font-weight : bold；} .红色{ color:红色；} .错误{ color:红色背景-颜色：黄色；} .基类{ transition:all三次bezier(0.250，0.460，0.450，0.940)0.5s；} .基类。my-class { color : red；font-size :3 em}/style/head body ng-app=' myApp ' div ng-controller=' myCtrl ' form name=' form ' p ng-class=' { delete d : deleted，bold: bold，' error': error}'Map语法示例/p标签输入类型=' checkbox ' ng-model=' deleted ' deleted(应用已删除的' class)/labelbr labelinput类型='checkbox' ng-model='bold'bold(应用类)/标签br labelinput类型='app.controller('myCtrl '，function($ scope){ })；/script/body/html strong/strong(9507 . 163.com)

8、ng-if实例

！DOCTYPE html html head meta charset=' UTF-8 '脚本src=' http : js/angular。js ' type=' text/JAVAScript ' charset=' utf-8 '/脚本标题表单验证/title样式。动画-if { width :400 px；border:2px固体黄绿色；边框半径： 10pxpadding:10pxdisplay:块；}/style/head body ng-app=' myApp ' div ng-controller=' myCtrl '表单名称=' form '标签点击me :输入类型=' checkbox ' ng-model=' checked ' ng-init=' checked=true '/label br/选中时显示：跨度ng-if=' checked ' class=' animate-if '当复选框未选中时，此选项将被删除/span /form /div脚本类型=' text/JavaScript ' var app=angular。模块(' myApp '，[])；app.controller('myCtrl '，function($ scope){ })；/脚本/正文/html

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