AngularJSb表单校验示例

<!DOCTYPE HTML>
<html ng-app="MyApp">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<script type="text/javascript" src="js/angular/angular.min.js"></script>
	<link rel="stylesheet" type="text/css" href="js/bootstrap/css/bootstrap.min.css"/>
	<link rel="stylesheet" type="text/css" href="js/bootstrap/css/bootstrap-theme.min.css"/>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/bootstrap/js/bootstrap.min.js"></script>
	<style type="text/css">
	.error{
		color:red;font-size:12px;
	}
	</style>
	<script type="text/javascript">
	var myApp = angular.module("MyApp",[]);
	myApp.config(function($interpolateProvider){
		$interpolateProvider.startSymbol("[[");
		$interpolateProvider.endSymbol("]]");
	});
	myApp.controller("MyController",["$scope",function($scope){
		$scope.showLoginDialog = function(){
			jQuery("#loginModal").modal("show");
		};
		
		$scope.closeLoginDialog = function(){
			jQuery("#loginModal").modal("hide");
		};
		
		$scope.sumbitLogin = function(){
			if($scope.loginForm.$invalid){
				$scope.loginForm.submitted = true;
			}else{
				alert("点击提交表单");
			}
		};
	}]);
	</script>
</head>
<body ng-controller="MyController">
	<input type="button" class="btn btn-primary" value="登陆" ng-click="showLoginDialog()"/>
	<!-- login modal -->
	<div id="loginModal" class="modal fade">
	  <div class="modal-dialog" style="width:400px;">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
	        <h4 class="modal-title">登陆</h4>
	      </div>
	      <form name="loginForm" class="form-horizontal" method="post" ng-submit="sumbitLogin()">
	      <div class="modal-body">
			  <div class="form-group form-group-sm">
			    <label for="username" class="col-sm-3 control-label">用户名</label>
			    <div class="col-sm-9">
			      <div class="error" ng-show="loginForm.username.$dirty&&loginForm.username.$invalid&&loginForm.submitted">
			      	用户名为3~10位长度的中文或英文字符串
			      </div>
			      <input name="username" ng-model="username" type="text" class="form-control" id="username" ng-minlength="3" ng-maxlength="10" ng-pattern="/^[A-Za-z0-9]+$/" required/>
			    </div>
			  </div>
			  <div class="form-group form-group-sm">
			    <label for="password" class="col-sm-3 control-label">密码</label>
			    <div class="col-sm-9">
			      <div class="error" ng-show="loginForm.password.$dirty&&loginForm.password.$invalid&&loginForm.submitted">
			      	密码长度不能超过20
			      </div>
			      <input name="password" ng-maxlength="20" ng-model="password" type="password" class="form-control" id="password" required/>
			    </div>
			  </div>
	      </div>
	      <div class="modal-footer">
	      	<button type="submit" class="btn btn-primary">登陆</button>
	        <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="closeLoginDialog()">关闭</button>
	      </div>
	      </form>
	    </div>
	  </div>
	</div>
</body>
</html>

效果如下:

AngularJSb表单校验示例_第1张图片

你可能感兴趣的:(AngularJSb表单校验示例)