詳細解讀AngularJS中的表單驗證程式設計_AngularJS
- WBOY原創
- 2016-05-16 15:53:591262瀏覽
需求
- Name 必填
- Username 非必填，最小長度3，最大長度8
- Email 非必填，但必須是合法的email
- 驗證未通過的表單不能提交
- 顯示一個必填或非法email格式的錯誤訊息
- 如果正確提交就彈出一個祝賀訊息
現在知道我們的目標了吧，讓我們一起來建造這個東西吧.
Angular 的表單屬性 $valid, $invalid, $pristine, $dirty
Angular 提供了有關表單的屬性來幫助我們驗證表單. 他們給我們提供了各種有關一個表單及其輸入的信息，並且應用到了表單和輸入.
屬性類
描述
- $valid ng-valid Boolean 告訴我們這項目前基於你設定的規則是否驗證通過
- $invalid ng-invalid Boolean 告訴我們這一目前基於你設定的規則是否驗證未通過
- $pristine ng-pristine Boolean 若表單或輸入框沒有使用則為True
- $dirty ng-dirty Boolean 若表單或輸入框有使用到則為True
Angular 也提供了有關表單及其輸入框的類，以便你能夠依據每一個狀態設定其樣式.
存取表單屬性
- 方位表單:
- 存取一個輸入框:
設定我們的表單
我們將使用一個簡單的表單來做示範.
我們將需要兩個檔案:
- index.html 我們用來顯示表單的程式碼
- app.js 我們的Angular應用程式和控制器 (幾乎沒有任何程式碼)
Our Form Code index.html
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<!-- CSS ===================== -->
<!-- load bootstrap -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<style>
body { padding-top:30px; }
</style>
<!-- JS ===================== -->
<!-- load angular -->
<script src="http://code.angularjs.org/1.2.6/angular.js"></script>
<script src="app.js"></script>
</head>
<!-- apply angular app and controller to our body -->
<body ng-app="validationApp" ng-controller="mainController">
<div class="container">
<div class="col-sm-8 col-sm-offset-2">
<!-- PAGE HEADER -->
<div class="page-header"><h1>AngularJS Form Validation</h1></div>
<!-- FORM -->
<!-- pass in the variable if our form is valid or invalid -->
<form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate> <!-- novalidate prevents HTML5 validation since we will be validating ourselves -->
<!-- NAME -->
<div class="form-group">
<label>Name</label>
<input type="text" name="name" class="form-control" ng-model="name" required>
</div>
<!-- USERNAME -->
<div class="form-group">
<label>Username</label>
<input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8">
</div>
<!-- EMAIL -->
<div class="form-group">
<label>Email</label>
<input type="email" name="email" class="form-control" ng-model="email">
</div>
<!-- SUBMIT BUTTON -->
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div><!-- col-sm-8 -->
</div><!-- /container -->
</body>
</html>
這裡列出了一些關鍵點:
- novalidate: 它將組織預設的HTML5驗證，因為這會由我們自己來做(我們自己的將會更棒)
- 我們在輸入框上套用了ng-model，以便將表單的資料綁定到angular變數
- username上的ng-minlength 和 ng-maxlength會自行創建其規則
- name 輸入框是必填的
- email 輸入框有屬性 type=”email”
驗證規則
Angular 有很多驗證規則，像是 tong-min leng than dng-max length.
Angular也可以自行設定規則. Angular輸入指引上有說明 .
<input
ng-model="{ string }"
name="{ string }"
required
ng-required="{ boolean }"
ng-minlength="{ number }"
ng-maxlength="{ number }"
ng-pattern="{ string }"
ng-change="{ string }">
</input>
現在建好了表單, 接著創建Angular應用和控制器，ng-app ng-控制器.
應用的 Codeapp.js
// app.js
// create angular app
var validationApp = angular.module('validationApp', []);
// create angular controller
validationApp.controller('mainController', function($scope) {
// function to submit the form after all validation has occurred
$scope.submitForm = function(isValid) {
// check to make sure the form is completely valid
if (isValid) {
alert('our form is amazing');
}
};
});
使HTML5驗證器的novalidate
我們將在我們的表單使用novalidate。這是一個很好的做法，因為我們將會自己處理驗證。如果我們讓我們的表單這樣做，它看起來很醜。
停用提交按鈕 ng-disabled
現在真正的好戲上演了。我們開始使用Angular的屬性 。首先讓我們停用我們的提交按鈕。如果我們的表單是$invalid的，我們只想停用它。
<!-- index.html --> ... <!-- SUBMIT BUTTON --> <button type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid">Submit</button> ...
只使用一點程式碼（ng-disabled），如果我們的表單是$invalid的，表單按鈕將被停用。
這表示，我們的name input 欄位是必要的，而email input欄位需要一個有效的電子郵件。
用 eng-show顯示錯誤訊息
ng-valid 和ng-invalid 會基於提供的表單規則自動驗證輸入的有效性.
咱們在輸入部分加上一些錯誤訊息，只要不等於$valid或是已經使用過的就行 (不能展示還沒使用).
<!-- index.html -->
...
<!-- NAME -->
<div class="form-group">
<label>Name</label>
<input type="text" name="name" class="form-control" ng-model="name" required>
<p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">You name is required.</p>
</div>
<!-- USERNAME -->
<div class="form-group">
<label>Username</label>
<input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8">
<p ng-show="userForm.username.$error.minlength" class="help-block">Username is too short.</p>
<p ng-show="userForm.username.$error.maxlength" class="help-block">Username is too long.</p>
</div>
<!-- EMAIL -->
<div class="form-group">
<label>Email</label>
<input type="email" name="email" class="form-control" ng-model="email">
<p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p>
</div>
...
就像这样 Angular 会根据规则来验证输入部分的$invalid 和 $pristine properties属性从而决定是否显示错误信息.
格局类
Angular在验证输入或表单时的有效有否是已经提供了一些类，像是 (ng-valid,ng-invalid,ng-pristineandng-dirty).
你可以编辑自己喜欢的CSS . 你可以私有定制化这些类来实现特定的场景应用.
.ng-valid { }
.ng-invalid { }
.ng-pristine { }
.ng-dirty { }
/* really specific css rules applied by angular */
.ng-invalid-required { }
.ng-invalid-minlength { }
.ng-valid-max-length { }
使用 ng-class 根据条件添加类
因为我们使用了 Bootstrap, 我们将就使用它们提供的类(has-error). 这样就能围绕我们的form-group获得漂亮的错误信息和颜色.
ng-class 允许我们基于一个表达式添加类. 在这种情况下，我们想要想我们的form-group添加一个 has-error 类，如果输入框的状态是$invalid或者不是pristine的话.
其工作的方式是 ng-class="{ 64e942f46d2e9af455b3f1c4acffb72e : 18f3084cc35bfabb3ad3e5c76b34d42c }". 更多的信息，请读一读 Angular ngClass 文档吧.
<!-- index.html -->
...
<!-- NAME -->
<div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine }">
<label>Name</label>
<input type="text" name="name" class="form-control" ng-model="user.name" required>
<p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">You name is required.</p>
</div>
<!-- USERNAME -->
<div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && !userForm.username.$pristine }">
<label>Username</label>
<input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8">
<p ng-show="userForm.username.$error.minlength" class="help-block">Username is too short.</p>
<p ng-show="userForm.username.$error.maxlength" class="help-block">Username is too long.</p>
</div>
<!-- EMAIL -->
<div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$pristine }">
<label>Email</label>
<input type="email" name="email" class="form-control" ng-model="user.email">
<p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p>
</div>
...
现在我们的表单就有了恰当的Bootstrap错误类.
只在提交表单后显示错误信息
有时候不想在用户正在输入的时候显示错误信息. 当前错误信息会在用户输入表单时立即显示. 由于Angular很棒的数据绑定特性，这是可以发生的. 因为所有的事务都可以在一瞬间发生改变，这在表单验证时会有副作用.
对于你想要只在表单正要提交之后才显示错误消息的场景, 你就需要对上面的代码做一些小调整.
- 你要去掉提交按钮上的ng-disabled，因为我们想要用户即使是在表单没有全部验证完的情况下也能点击提交.
- 你要在表单已经被提交之后添加一个变量. 在你的 submitForm() 函数中, 只要加入 $scope.submitted = true 就行了;. 一旦表单被提交，它就会保存提交值为true的submitted变量.
- 将错误规则从ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine }" 调整为 ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine && submitted }". 这就确保了错误消息只会在表单被提交时被显示出来. 你也许会需要为这个变量调整所有其它的 ng-class 和 ng-show.
现在，只有在submitted变量被设置为true时才会显示错误信息.
只有在输入框之外点击时才显示错误消息
只有在输入框之外点击时才显示错误消息（也被叫做失去焦点 blur) 这一需求比在提交时验证要复杂一点. 在失去焦点时验证表单需要一个custom指令. 这是一个可以让你操作DOM的指令.
我们正在写一篇文章专门讨论此话题。同时，还有其他的一些资源讨论了创建custom指令来处理失去焦点的情况:
- http://coding-issues.blogspot.in/2013/10/angularjs-blur-directive.html
- http://blog.ejci.net/2013/08/06/dealing-with-focus-and-blur-in-angularjs-directives/
- http://plnkr.co/edit/Xfr7X6JXPhY9lFL3hnOw?p=preview
全部完成
现在一旦我们正确填写了所有的信息，我们的表单提交按钮就能使用了. 一旦我们提交了表单，我们将会见到我们设置的弹出消息.
用了几行我们就可以:
- 进行输入框验证
- 显示表单错误消息
- 定制样式类
- 自动禁止和启用表单
- 定制规则
如你所见，我们使用了Angular内置的表单验证技术来创建一个客户端验证表单.