AngularJS（五）：表单及输入验证

时间 2019-11-17

原文原文链接

本文也同步发表在个人公众号“个人天空”html

表单基础html5

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

<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>
github

示例代码AngularJS_13.html
正则表达式

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

接下来要注意的是，咱们对于文本框的ng-model数据绑定不是“name”与“email”，而是“user.name”与“user.email”，可是在控制器代码中，咱们并未声明user对象，即没有相似于“var user={}”对象声明代码。在AngularJS中，当使用ng-model时，其会自动建立所必须的对象和键来实例化数据绑定，所以，初始时是没有user对象的，只有在当用户名或email框中输入字符时，才会建立user对象，并赋值到相应的绑定字段。app

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

输入验证
ui

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

<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