发表于: 2019-10-26 18:43:05

1 976


今天完成的事情:


完成angularHTML


学习表单验证


做angular的学习笔记




表单验证:


使用AngularJs对表单元素进行校验是相当方便的,我们来看一下可以在input元素上使用的所有校验选项。

1.必填项

验证某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可:

`<input type="text" required />

2. 最小长度

验证表单输入的文本长度是否大于某个最小值,在输入字段上使用AngularJS指令ng-minleng= “{number}”:

<input type="text" ng-minlength="5" />

3. 最大长度

验证表单输入的文本长度是否小于或等于某个最大值,在输入字段上使用AngularJS指令ng-maxlength=”{number}”: 

<input type="text" ng-maxlength="20" />

4. 模式匹配

使用ng-pattern=”/PATTERN/”来确保输入能够匹配指定的正则表达式: 

<input type="text" ng-pattern="[a-zA-Z]" />

5. 电子邮件

验证输入内容是否是电子邮件,只要像下面这样将input的类型设置为email即可: 

<input type="email" name="email" ng-model="user.email" />

6. 数字

验证输入内容是否是数字,将input的类型设置为number: 

<input type="number" name="age" ng-model="user.age" />

7. URL

验证输入内容是否是URL,将input的类型设置为 url: 

<input type="url" name="homepage" ng-model="user.facebook_url" />


Angular 提供两种不同的方法来通过表单处理用户输入
  • 响应式表单
响应式表单更健壮:它们的可扩展性、可复用性和可测试性更强。 如果表单是应用中的关键部分,或者你已经准备使用响应式编程模式来构建应用,请使用响应式表单。
  • 模板驱动表单
模板驱动表单在往应用中添加简单的表单时非常有用,比如邮件列表的登记表单。它们很容易添加到应用中,但是不像响应式表单那么容易扩展。如果你有非常基本的表单需求和简单到能用模板管理的逻辑,请使用模板驱动表单。
两者的差异
<div 响应式
<div 模板驱动
<div 建立(表单模式)<div 显式,在组件类中创建。<div 隐式,由组件创建。
<div 数据模式<div 结构化<div 非结构化
<div 可预测性<div 同步<div 异步
<div 表单验证<div 函数<div 指令
<div 可变性<div 不可变<div 可变
<div 可伸缩性<div 访问底层 API<div 在 API 之上的抽象
共同基础
响应式表单和模板驱动表单共享了一些底层构造块。
  • FormControl 实例用于追踪单个表单控件的值和验证状态。
  • FormGroup 用于追踪一个表单控件组的值和状态。
  • FormArray 用于追踪表单控件数组的值和状态。
  • ControlValueAccessor 用于在 Angular 的 FormControl 实例和原生 DOM 元素之间创建一个桥梁。

明天计划的事情:


彻底完成JS任务七




返回列表 返回列表
评论

    分享到