前面的6篇笔记大概介绍了一下angularjs的一些基础,确实挺无味。这一节就来一些干货,我们来看看angularjs是如何处理表单验证的。当你亲自尝试过之后,你定会深深的喜欢上angularjs处理数据的这种方式,so cool~

那么,让咱们现在就开始吧!

一、表现形式

①隐藏\显示错误提示消息;
angularjs
②高亮输入框
angularjs

③自定义验证
当然,如果以上两种表格验证方式还不能满足需要的话,那么也不用担心。我们可以通过编写指令来随心所欲的控制表单验证方式,这里就不细说了。后续在指令章节,我会通过具体事例来展现。

上面展现了三种方式,当然只要你善于创造,肯定不会局限于上述表现形式。就像网络流行语所说:you can you up!

二、验证示例

上面展示了angularjs中两种验证方式,看起来不错吧,下面我通过简单代码一个个来具体说明。这里需要注意两个问题:

其一,需要引入以下文件(我用了angular-ui)

1
2
3
4
<link href="bootstrap.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src='angular.js'></script>
<script type='text/javascript' src='ui-bootstrap-tpls-0.10.0.js'></script>
<script type='text/javascript' src='main.js'></script>

其二,main.js是我自建文件,代码如下:

1
2
3
4
5
6
var myApp=angular.module('myModule', ['ui.bootstrap']);
myApp.controller('myCtrl',function($scope){
$scope.reset=function(){ //表单重置
$scope.user={account:'',email:''};
}
});

这里我们向module中注入了ui.bootstrap,这样就可以用angular-ui去做一些事情了。好了,到这里,我们前期的准备就做好了。

①隐藏\显示错误提示消息;

1
2
3
4
5
6
7
8
9
10
11
12
13
<form id="css_form"class="form-horizontal" novalidate name="myform" role="form" >
<div class="form-group">
<label for="inputAccount" class="col-sm-2 control-label">账号:</label>
<div class="col-md-2">
<input type="number" ng-model="user.account" min="3" max="6" name="myAccount" required class="form-control" id="inputAccount" placeholder="请输入3-6的整数"/>
</div>
<div class="input-required">*</div>
/*输入框*/
<div class="alert alert-danger well-sm" ng-show="myform.myAccount.$error.required">不能为空!</div>
<div class="alert alert-danger well-sm" ng-show="myform.myAccount.$error.min || myform.myAccount.$error.max">
输入值必须在3-6之间!</div>
</div>
</form>

注意:就像上述代码所展示的,我需要预判断用户可能输入的错误类型,然后置于div中,通过ng-show的true/false来显示/隐藏。

这里出现了一个$error属性,你需要记住的就是$error对象包含了某个特定表单所有的验证信息以及表单是否合法。如果某个验证失败,则这个属性返回true,相反如果验证通过,则这个属性返回false。

②高亮输入框具体实现代码:
首先,我们来设置输入框高亮显示的样式,代码如下:

1
2
3
4
5
6
7
8
<style>
#css_form input.ng-invalid.ng-dirty {
background-color: #FFC0CB;
}
#css_form input.ng-valid.ng-dirty {
background-color: #78FA89;
}
</style>

接下来,我们需要搞出一个表单,包含两个输入框和两个按钮(为了代码简洁,我只保留一个输入框),具体代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<form id="css_form"class="form-horizontal" novalidate name="myform" role="form" >
<div class="form-group">
<label for="inputAccount" class="col-sm-2 control-label">账号:</label>
<div class="col-md-2">
/*输入框*/
<input type="text" ng-model="user.account" ng-pattern="/^[0-9]{6}$/" name="myAccount" required class="form-control" id="inputAccount"
placeholder="请输入6位的数字账号"/>
</div>
<div class="input-required">*</div>
</div>
/*按钮组*/
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-default" ng-disabled="!myform.$valid">提交</button>
<button class="btn btn-default" ng-click="reset()">重置</button>
</div>
</div>
</form>

注意:
从上面代码可以看出,我在form中加了id=”css_form”和name=”myform”这两个属性,同时在提交按钮中添加了ng-disabled=”!myform.$valid”。这就够了,剩下的angular全部为我们搞定了。当然,前提是你的body中也这么写,之前的笔记有说明过,这样用来确定angular的操作范围,这里就不赘述了。

你可能会疑问,valid、dirty和invalid这又是什么?不过没关心,下面我会具体阐述。

三、参数说明

①valid、invalid、pristine和dirty
valid标记表单元素有效;
invalid标记表单元素无效;
pristine表示表单元素是纯净的,用户未操作过;
dirty表示表单元素是已被用户操作过;

②更改css属性
.ng-pristine {}
.ng-dirty {}
.ng-valid {}
.ng-invalid {}

正如上面示例二所示,我可以预先定义表单验证的表现方式。当然,这些类名是不能更改的,我们只能去覆盖父类属性。

四、注意事项

①novalidate
标准浏览器如火狐,谷歌等对HTML5有很好的支持。众所周知,HTML5中input的type属性已经具备了验证功能。如果你要自己定义验证方式,那么请加上novalidate属性,以此避开浏览器自行验证。

②type类型
HTML5的type属性可以包含text、email、number等,但是angular又内部重写了这些属性,所以放心大胆的去用吧,angular完全可以满足你所有的验证。

③type=”number”还是ng-pattern=”/^[0-9]{6}$/“
你可以使用type=”number”来限制输入框只能输入数字,当然你也可以用ng-pattern来验证用户输入,从而过滤掉非数字输入。这完全取决于你的爱好,没有硬性规定,只是选择多一些罢了。

参考文章:

AngularJS官方API:https://docs.angularjs.org/