1.引言
在上一篇博客中主要说了两个指令:ng-model
和ng-bind
,这两个指令都是和数据绑定相关的,ng-model
指令可以双向绑定数据,ng-bind
可以向html页面输出我们的变量,在本篇博客中将介绍一下AngularJS
对于表单input
相关标签的扩展,使用AngularJS
关于input
标签的扩展我们可以实现更多复杂的功能,比如表单验证,还有控制input
是否可用等等。
2. AngularJS
的input
验证
接下来我们先看一下在AngularJS
扩展的input
中如何去实现表单的验证呢?AngularJS
扩展的input
标签类型有:
checkbox
:代表复选框date
:代表日期格式,日期格式必须按照(yyyy-MM-dd)的校验规范,例如: 2009-01-06.dateTimeLocal
:日期格式,日期格式必须按照(yyyy-MM-ddTHH:mm)的校验规范email
:Email格式的文本输入验证,用于验证是不是有效的email
地址month
:月份输入的验证和转换number
:数字格式的文本输入验证和转换radio
:HTML单选框。text
:可以进行angular数据绑定的标准HTML文本输入框。time
:时间输入的验证和转换url
:URL文本输入校验week
:年的周数输入的验证和转换到日期
AngularJS
一共扩展了上述这几种input
标签类型,并且提供了相应的验证机制,比如:
formname.$error.required
:表单是否错误(比如有没有必需的值没有填写),其中formname
为表单的name
属性,这是一个bool
类型formname.$valid
:表单是否合法(比如表单某个文本框输入是否和验证的匹配),其中formname
为表单的name
属性,这是一个bool
类型formname.inputname.$valid
: 表单的input
标签是否合法,其中formname
是表单的name
属性,inputname
是input
标签的input
属性,这是一个bool
类型formname.inputname.$error
:表单的input
标签是否错误,其中formname
是表单的name
属性,inputname
是input
标签的input
属性,这是一个bool
类型
2.1 input
验证代码实现
接下来我们就用一个实例来看看input
的代码验证是符合实现的。
2.1.1 验证标签的合法性
- 首先引入我们的
AngularJS
函数库
<script src="js/angular.js"></script>
- 然后创建一个form表单(必须带有name属性),创建一个
input
标签(必须带有name
属性),为了可以实时显示我们的数据,添加ng-model
指令
<form name="myform">
输入我们的url: <input name="myurl" type="url" ng-model="value">
</form>
- 然后我们看一下我们的验证值
myform.myurl.$valid:{{myform.myurl.$valid}}
- 运行结果
2.1.2 验证标签的错误性
上面我们验证的是url属否输入合法,但是存在一个问题,当我们不输入任何东西的时候,标签的验证是是显示为:true
,这显然是不符合要求的:
接下来我们就来添加required
,设置该值是必须的。
- 给input标签添加
必需
属性
<form name="myform">
输入我们的url: <input name="myurl" type="url" required ng-model="value">
</form>
- 然后添加错误认证(注意:我们在
myform.myurl.$error.required
前面加了一个)
myform.myurl.$error:{{!myform.myurl.$error.required}}
- 运行结果
2.1.3 结合合法和错误实现我们的表单验证
在上面的例子中,还是存在一定的缺陷,在真实的开发中,我们不应该仅仅的显示一个true
和false
就完事了,我们更应该的是给用户提示,如果用户输错了,我们提示用户输入的url不合法,如果用户输入正确,然后我们不提示,在这里我们就结合ng-show
指令,实现我刚刚所说的功能,ng-show
需要一个布尔值,如果布尔值为true
标签显示,如果布尔值为false
,标签不显示,接下来我们来看看是如何实现的。
- 引入我们的
AngularJS
函数库(省略) - 创建我们的表单(以及我们的表单验证)
<form name="myform">
输入我们的url: <input name="myurl" type="url" required ng-model="value">
<span ng-show="myform.myurl.$error.required">url必须输入</span>
<span ng-show="!myform.myurl.$valid">url输入不合法</span>
</form>
- 运行结果
2.2 AngularJS
帮助文档
当然AngularJS
表单验证的属性没有上述的那么简单,如果想进一步了解AngularJS
表单验证的其他属性,可以去查看AngularJS
的帮助文档,帮助文档的下载地址为:AngularJS帮助文档
3. AngularJS
的input
其他扩展
AngularJS
关于input
标签的扩展绝对不仅仅局限于上述的表单验证,它还扩展了一些其他的用法,比如:标签是否可用,标签是否选中,接下我们看看这个指令如何使用。
3.1 控制标签是否可用
- 代码
<input type="button" value="按钮不可点击" ng-disabled="true">
- 运行结果
3.2 控制input标签只可读
- 代码
<input type="text" value="{{'文本只可读'}}" ng-readonly="true">
- 运行结果
3.3 控制复选框选中
- 代码
<input type="checkbox" value="{{'复选框被选中'}}" ng-checked="true">
- 运行结果
3.4 控制select选中
- 代码
<input type="checkbox" ng-model="sel">
<select>
<option>11111</option>
<option ng-selected="sel" >22222</option>
</select>
- 运行结果
4.总结
在本篇博客中主要记录了AngularJS
对于input
标签的扩展,以及如何实现表单验证,还有一些实现了表单的是否可用,这时候我们可能有疑问,为什么AngularJS
会扩展一些ng-selected
,ng-readonly
此类指令,此类指令可以直接写AngularJS
变量,很方便我们的MVC思想,以后我们可以将变量写在我们的控制器中,然后控制我们的HTML标签。