本文也同步发表在我的公众号“我的天空”

表单基础

表单是HTML中很重要的一个部分，基本上我们的信息录入都依靠表单，接下来我们学习如何在AngularJS中使用表单，首先看以下示例代码：

<body ng-app="myApp" ng-controller="person">
       <form ng-submit="submit()">
         <p>用户名:
            <input type="text" ng-model="user.name">
         </p>
         <p>邮箱:
            <input type="text" ng-model="user.email">
         </p>
         <input type="submit" value="提交">
      </form>
 </body>
 <script>
    var app=angular.module("myApp",[]);
       app.controller("person",function($scope){
         $scope.submit=function(){
             alert(JSON.stringify($scope.user));
         }
     });
 </script>

示例代码AngularJS_13.html

分析以上代码，我们添加了一个表单，在表单中增加了ng-submit指令，这样我们就无需在提交按钮中添加ng-click了，两者的区别是，前者有多种方式触发表单提交事件：单击提交按钮、文本框内回车等。

接下来要注意的是，我们对于文本框的ng-model数据绑定不是“name”与“email”，而是“user.name”与“user.email”，但是在控制器代码中，我们并未声明user对象，即没有类似于“var

user={}”对象声明代码。在AngularJS中，当使用ng-model时，其会自动创建所必须的对象和键来实例化数据绑定，因此，初始时是没有user对象的，只有在当用户名或email框中输入字符时，才会创建user对象，并赋值到相应的绑定字段。

最后，我们在submit方法中显示user对象，为了实现可见性，我们使用了JSON.stringfy来将对象转换成字符串以便显示其内容。

输入验证

在表单的输入中，总是离不开输入验证，如不能为空、必须为邮箱格式、是否为数字、输入字符长度范围等，我们来看看AngularJS是如何实现输入验证的，看以下代码：

<body ng-app="myApp" ng-controller="person">
       <form ng-submit="submit()" name="myForm"  novalidate>
         <p>用户名:
            <input type="text" ng-model="user.name" ng-minlength="4" required>
         </p>
         <p>邮箱:
            <input type="email" ng-model="user.email" required>
         </p>
         <input type="submit" value="提交" ng-disabled="myForm.$invalid">
      </form>
 </body>
 <script>
    var app=angular.module("myApp",[]);
       app.controller("person",function($scope){
         $scope.submit=function(){
             alert(JSON.stringify($scope.user));
         }
     });
 </script>

示例代码AngularJS_14.html

以上代码是在示例13上更改的，我们主要分析一下变更的部分。

首先我们为表单指定了名称为“myForm”以便之后使用，同时在form中添加了“novalidate”属性，这个是阻止html5默认的输入验证，因为我们要使用自己的输入验证。

随后在用户名输入框中，我们增加了ng-minlength指令，规定了用户名的最小长度为4个字符，同时添加了“required”属性，表明该字段不能为空。在邮件输入框中，我们设置了“type='email'”，表明该输入框需要对输入内容做邮箱有效性验证。

最后在提交按钮中，我们添加了指令ng-disabled来控制该按钮的有效性，其值等于myForm.$invalid，如果在表单中，只要有不符合输入验证的，则该值便为false，自然提交按钮便无效。

在该段代码中，我们通过验证器（如ng-minlength）、表单状态(如$invalid)等的综合使用来实现输入验证，我们做一个总结：

AngularJS验证器

  • required               确保字段必需

  • ng-required         确保字段必需，与required不同的是，我们可以对ng-required赋值

  • ng-minlength       规定字段的最小长度

  • ng-maxlength      规定字段的最大长度

  • ng-pattern            指定正则表达式对字段进行有效性检查

  • type="email"        输入字段必须为邮箱

  • type="number"    输入字段必须为数字

  • type="date"          如果浏览器支持，显示一个日期选择器，否则作为一个文本输入

  • type="url"             输入字段必须为url

AngularJS表单状态

  • $invalid      当任一字段验证无效时

  • $valid         与$invalid相反，当所有字段验证有效时

  • $pristine    表单的初始状态，此时无任何被修改的表单元素

  • $dirty          与$pristine相反，表明表单元素发生了修改

  • $error         表明表单元素验证失败

表单状态均是布尔值，我们一般利用其来显示、隐藏、禁用或启用HTML元素，对于$error状态，我们接下来将进一步说明。

在示例14中，当有字段验证未通过时，我们只是简单的将提交按钮设置为无效，但是通常，我们需要提供更多的错误信息，来引导客户输入正确的信息，这个一般就要用到$error了，来看以下代码：

<body ng-app="myApp" ng-controller="person">
     <form ng-submit="submit()" name="myForm"  novalidate>
         <p>用户名:
         <input type="text" name="name" ng-model="user.name" ng-minlength="4" required>
         <span ng-show="myForm.name.$error.required">用户名是必须的</span>
         <span ng-show="myForm.name.$error.minlength">用户名长度必须大于4位</span>
         </p>
         <p>邮箱:
         <input type="email" name="email" ng-model="user.email" required>
         <span ng-show="myForm.email.$error.email">非法的邮箱</span>
         <span ng-show="myForm.email.$error.required">邮箱是必须的</span>
         </p>
         <input type="submit" value="提交" ng-disabled="myForm.$invalid">
    </form>
 </body>
 <script>
    var app=angular.module("myApp",[]);
       app.controller("person",function($scope){
         $scope.submit=function(){
             alert(JSON.stringify($scope.user));
         }
     });
 </script>

示例代码AngularJS_15.html

我们来分析以上代码，与示例14做比较，首先我们为输入框添加了name属性，接下来在输入框后跟着span标签，当输入验证不通过时显示相应的信息，span标签的显隐由指令ng-show来控制，而其值是取决于$error的不同状态，如当用户名输入框中输入的字符长度小于4位时，则“myForm.name.$error.minlength”的值为true，因此相应的span便显示，提示用户错误信息。

该系列的示例代码

https://github.com/panyongwow/angularJS

AngularJS（五）：表单及输入验证的更多相关文章

  1. [Swift通天遁地]二、表格表单-(8)快速实现表单的输入验证

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  2. 走进AngularJs(九)表单及表单验证

    年底了越来越懒散,AngularJs的学习落了一段时间,博客最近也没更新.惭愧~前段时间有试了一下用yeoman构建Angular项目,感觉学的差不多了想做个项目练练手,谁知遇到了一系列问题.yeom ...

  3. 【AngularJs】---表单验证

    1. 必填项 验证某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" required /> 2 ...

  4. angularJS 过滤器 表单验证

    过滤器1.filter的作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果,主要用于数据的格式化.2.内置过滤器(1)Currency(货币)将一个数值格式化为货币格式,默认为$(2)D ...

  5. AngularJS 的表单验证

    最近开始学习angularjs,学到表单验证的时候发现有必要学习下大神的好文章: 转:http://www.oschina.net/translate/angularjs-form-validatio ...

  6. 基于angularJS的表单验证练习

    今天看了一下angularJS的表单验证,看的有点云里雾里(也有可能是雾霾吸多了),于是做了一个小练习来巩固一下. html: <div ng-controller="Aaa" ...

  7. AngularJS实现表单手动验证和表单自动验证

    AngularJS的表单验证大致有两种,一种是手动验证,一种是自动验证.一.手动验证 所谓手动验证是通过AngularJS表单的属性来验证.而成为AngularJS表单必须满足两个条件: 1.给for ...

  8. HTML（五）列表，区块，布局，表单和输入

    HTML 列表 无序列表 Coffee Tea Milk 默认是圆点,也可以 圆圈 正方形 有序列表 Coffee Tea Milk Coffee Tea Milk 默认是用数字排序 大写字母 小写字 ...

  9. AngularJS(9)-表单

    AngularJS 表单是输入控件的集合 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

随机推荐

  1. 缓存与数据库一致性之二：高并发下的key重建（先淘汰cache再写db）的问题

    一.为什么数据会不一致 回顾一下上一篇文章<缓存与数据库一致性之一:缓存更新设计>中对缓存.数据库进行读写操作的流程. 写流程: (1)先淘汰cache (2)再写db 读流程: (1)先 ...

  2. Hive与表操作有关的语句

    Hive与表操作有关的语句 1.创建表的语句: Create [EXTERNAL] TABLE [IF NOT EXISTS] table_name [(col_name data_type [COM ...

  3. VC代码生成里面的/MT /MTd /MD /MDd的意思

    VC代码生成里面的/MT /MTd /MD /MDd的意思. 意思上已经很明白了.但是往往很多人弄不清楚到底怎么选择. /MT是 "multithread, static version ” ...

  4. adt eclipse 配置问题 error:could not open ...jvm.cfg

    在安装adt eclipse后,打开eclipse提示error:could not open eclipse\jre\lib\amd64\jvm.cfg 据网上显示原因应该是以前安装过java,然后 ...

  5. pandas基础(3)_数据处理

    1:删除重复数据 使用duplicate()函数检测重复的行,返回元素为bool类型的Series对象,每个元素对应一行,如果该行不是第一次出现,则元素为true >>> df =D ...

  6. 洛谷P2018 消息传递

    P2018 消息传递 题目描述 巴蜀国的社会等级森严,除了国王之外,每个人均有且只有一个直接上级,当然国王没有上级.如果A是B的上级,B是C的上级,那么A就是C的上级.绝对不会出现这样的关系:A是B的 ...

  7. appium运行遇到的坑01

    ..... File "build\bdist.win32\egg\appium\webdriver\errorhandler.py", line 29, in check_res ...

  8. 基于 Laravel Route 的 ThinkSNS+ Component

    这里是传送门: <ThinkSNS+ 基于 Laravel master 分支,从 1 到 0,再到 0.1[ThinkSNS+研发日记系列一]> <基于 Laravel 开发 Th ...

  9. spring 公用异常处理

    1. 采用spring boot注解方式,如果采用swagger的话会导致swagger不可用 1.1  spring 配置如下 #出现错误时, 直接抛出异常 spring.mvc.throw-exc ...

  10. ios Realm的使用 本地数据存储

    引入需要的文件 pod 'RealmSwift' pod 'Realm' 然后在命令行使用 (首先应该cd到项目的根目录)输入 pod install 等待下载就行了(这个下载有点费劲,其他的插件包下 ...