代码改变世界

angualrJS之表单验证

2013-09-01 23:04  小沈_syt  阅读(1624)  评论(2)  编辑  收藏  举报

　　首先看一个小DEMO，代码如下：

<!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>

　　运行效果如下：

　　

　　1、虽然此处用了form表单，但是此处的form表单已经被angularJS进行处理，成为angularJS的命令，不再是HTML原生的表单，所以我们不需要写onsubmit来调用某个JS函数，而是通过angularJS的命名ng-submit来调用某个$scope对象上的方法。参考：http://docs.angularjs.org/api/ng.directive:form

　　2、angularJS已为form表单命令提供了参数验证和防止重复提交。

　　3、此处为一个登陆界面的表单验证，验证比较简单，仅用了ng-minlength、ng-maxlength，用于限定输入的长度。

　　4、表单元素需要进行验证，比如采用ng-model进行数据绑定，否则angularJS无法获取到该元素的值，则不能进行验证。

　　

　　如何获取某个表单元素的验证情况？

　　　　所有的表单元素的验证情况均绑定在$scope上，设置form的name值，表单元素的name值，通过以下的属性可以获取不同的信息（见DEMO）：

　　　　　　$valid 数据是否合法：true/false

　　　　　　$invalid 数据是否非法：true/false

　　　　　　$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。