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。