angualrJS之表單驗證

時間 2019-11-14

原文原文鏈接

　　首先看一個小DEMO，代碼以下：javascript

<!DOCTYPE HTML>
<html lang="zh-cn" >
<head>
    <meta charset="UTF-8">
    <title>CSSClasses</title>
    <script src="angular.min.js" type="text/javascript"></script>
<script type="text/javascript">
    function MyCtrl($scope){
		$scope.login = function(){
			if($scope.loginFm.$valid && $scope.loginFm.$dirty){
				alert("經過驗證");
			}else{
				alert("未經過驗證");
			}
		}
	}
</script>
</head>
<body ng-app>
<div ng-controller="MyCtrl">
    <form name="loginFm"  ng-submit="login()">
		Name:<input ng-model="name" name="name" ng-minlength="3" ng-maxlength="16"  /><br />
			<span ng-show="loginFm.name.$dirty&&loginFm.name.$invalid">you must write Name</span><br />	
		Pwd :<input ng-model="pwd" name="pwd" ng-minlength="6" ng-maxlength="16" /><br />	
			<span ng-show="loginFm.pwd.$dirty&&loginFm.pwd.$invalid">you must write pwd</span><br />	
		<input type="submit" value="login" />
	</form>
</div>

</body>
</html>

　　運行效果以下：html

　　一、雖然此處用了form表單，可是此處的form表單已經被angularJS進行處理，成爲angularJS的命令，再也不是HTML原生的表單，因此咱們不須要寫onsubmit來調用某個JS函數，而是經過angularJS的命名ng-submit來調用某個$scope對象上的方法。參考：http://docs.angularjs.org/api/ng.directive:formjava

　　二、angularJS已爲form表單命令提供了參數驗證和防止重複提交。angularjs

　　三、此處爲一個登錄界面的表單驗證，驗證比較簡單，僅用了ng-minlength、ng-maxlength，用於限定輸入的長度。api

　　四、表單元素須要進行驗證，好比採用ng-model進行數據綁定，不然angularJS沒法獲取到該元素的值，則不能進行驗證。app

　　如何獲取某個表單元素的驗證狀況？函數

　　　　全部的表單元素的驗證狀況均綁定在$scope上，設置form的name值，表單元素的name值，經過如下的屬性能夠獲取不一樣的信息（見DEMO）：spa

　　　　　　$valid 數據是否合法：true/false3d

　　　　　　$invalid 數據是否非法：true/falsecode

　　　　　　$dirty 表單是否被輸入過數據：true/false

　　　　　　$error 驗證信息，包含多個驗證的信息：true/false

　　　　結合上述DEMO中代碼，當界面加載完畢，Name未輸入數據 $invalid爲true，$dirty爲false，提示信息不會顯示。當Name輸入數據：1，此時$dirty爲true，而且

　　長度不知足驗證條件，$invalid爲依然爲true，觸發Name相關的提示信息。

　　　　若是某個表單含有多少個驗證條件，經過$error便可分別獲取各個驗證條件的結果，如：$scope.loginFm.name.$error.minlength。