您的位置：首页 > Web前端 > AngularJS

AngularJSb表单校验示例

2015-10-27 13:19 696 查看 
<!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>

效果如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航