用户输入正确的邮箱,密码后才能点击登陆按钮。
复制代码到html可直接运行:
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>register</title>
<link rel="stylesheet"
href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('registerCtrl', function($scope) {
});
</script>
</head>
<body onload="document.getElementById('email').focus()">
<div class="col-sm-6 col-sm-offset-3" ng-app="myApp"
ng-controller="registerCtrl">
<h1>用户注册</h1>
<form name="registerForm" novalidate>
<div id="email-group">
<label for="email">E-mail:</label> <input type="email"
class="form-control" ng-model="email" name="email" id="email"
placeholder="请输入电子邮箱..." required>
<p>
<span style="color: red" ng-show=" registerForm.email.$invalid">
<span ng-show="registerForm.email.$error.required">*请输入邮箱</span> <span
ng-show="registerForm.email.$error.email">*请输入正确的email地址</span>
</span>
</p>
</div>
<div id="name-group">
<label for="name">昵称:</label> <input type="text"
class="form-control" ng-model="name" name="name" id="name"
placeholder="请输入昵称..." required>
<p>
<span style="color: red" ng-show="registerForm.name.$invalid">
<span ng-show="registerForm.name.$error.required">*请输入姓名</span>
</span>
</p>
</div>
<div id="password-group">
<label for="password">密码:</label> <input type="password"
class="form-control" ng-model="password" ng-minlength="6"
ng-maxlength="20" name="password" id="password"
placeholder="请输入密码..." required>
<p>
<span style="color: red" ng-show="registerForm.password.$invalid">
<span ng-show="registerForm.password.$error.minlength">*密码长度不小于6</span>
<span ng-show="registerForm.password.$error.maxlength">*密码长度不超过20</span>
</span>
</p>
</div>
<div id="passwordagaingroup">
<label for="passwordagain">再输入一遍密码:</label> <input type="password"
class="form-control" ng-model="passwordagain" name="passwordagain"
id="passwordagain" placeholder="请再输一遍密码..." required>
<p>
<span style="color: red" ng-show="registerForm.password.$valid">
<span ng-show="passwordagain!=password">*两次密码输入不一致</span>
</span>
</p>
</div>
<button type="submit" class="btn btn-success"
ng-disabled="registerForm.email.$invalid || registerForm.name.$invalid || registerForm.password.$invalid || password != passwordagain">
提交<span class="fa fa-arrow-right"></span>
</button>
</form>
</div>
</body>
</html>
运行结果如下: