我们都知道一些浏览器并不识别HTML5的表单认证,所以我一般使用AngularJS去进行输入验证,但使用AngularJS的输入验证有一个问题就是会产生闪烁。当你访问页面时,错误提示会一闪而过,出现这种情况的原因是因为,AngularJS的数据加载需要时间,尽管时间很短,但依然影响用户体验。如何消除这种影响呢?
1. 在AngularJS中有一个ng-cloak的指令,它将自己下面的内容隐藏,当浏览器加载完成后,这个属性自然会删除。
<form class="form-horizontal" action="/opp/add" method="post" ng-app="addOpp" ng-controller="addOppCtr" name="addForm" novalidate ng-cloak>
<div class="form-group">
<label for="client_name" class="col-sm-2 control-label">Client Name<span style="color:red">*</span></label>
<div class="col-sm-10">
<input class="form-control" id="client_name" name="client_name" ng-model="client_name" type="text" required/>
<span style="color:red" ng-show="addForm.client_name.$dirty && addForm.client_name.$invalid">
<span ng-show="addForm.client_name.$error.required">Client Name is required</span>
</span>
</div>
</div>
如上代码所示,ng-cloak下面相关的AngularJS输入验证都将隐藏,只有浏览器加载完成时,输入验证才会产生作用。
2.使用ng-bind代替{{}}。