引言AngularJS的input验证 1 input验证代码实现 11 验证标签的合法性12 验证标签的错误性13 结合合法和错误实现我们的表单验证 2 AngularJS帮助文档 AngularJS的input其他扩展 1 控制标签是否可用2 控制input标签只可读3 控制复选框选中4 控制select选中 总结

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标签。