<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>登入页</title>
<link rel="stylesheet" href="lib/bootstrap.min.css">
<link rel="stylesheet" href="lib/font-awesome-4.7.0/css/font-awesome.min.css">
<style >
.wrapper{
width: 200px;
margin: 50px auto;
}
input.error{
border: #a10 solid 1px;
}
.error{
color: #a10;
}
.result{
position: relative;
left: 170px;
top: -37px;
}
.success{
color:#3c763d;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div class="wrapper">
<h2>注册</h2>
<form name="signUpForm" ng-submit="submitForm()">
<div class="form-group" ng-class="{'has-success':signUpForm.username.$valid}">
<label>用户名：</label>
<input type="text"
name="username"
class="form-control"
ng-model="userdata.text"
ng-minlength="4"
ng-maxlength="10"
required
>
</div>
<p class="error" ng-if="signUpForm.username.$error.required&&signUpForm.username.$touched">用户名不可为空</p>
<p class="error" ng-if="(signUpForm.username.$error.minlength||signUpForm.username.$error.maxlength)&&signUpForm.username.$touched">用户名在4-10字母间</p>
<p class="fa fa-check result success" ng-if="signUpForm.username.$valid"></p>
<!-- <pre>合法{{signUpForm.username.$valid}} </pre>
<pre>{{userdata.username}} </pre>
<pre>{{signUpForm.password}} </pre> -->
<div class="form-group" ng-class="{'has-success':signUpForm.password.$valid}">
<label>密码：</label>
<input type="password" name="password"
class="form-control"
ng-model="userdata.password"
ng-minlength="6"
ng-maxlength="20"
required="required">
</div>
<p class="error" ng-if="signUpForm.password.$error.required&&signUpForm.password.$touched" >密码不可以为空</p>
<p class="error" ng-if="(signUpForm.password.$error.minlength||signUpForm.password.$error.maxlength)&&signUpForm.password.$dirty" >密码在6-20字母间</p>
<p class="fa fa-check result success" ng-if="signUpForm.password.$valid"></p>
<!-- 不大于或者不小于长度 并且在$dirty 输入框有输入的情况下（或者在$touched 情况下） -->
<div class="form-group" ng-class="{'has-success':signUpForm.password2.$valid}">
<label>确认密码：</label>
<input type="text" name="password2"
class="form-control"
ng-model="userdata.password2"
ng-minlength="6"
ng-maxlength="20"
required
>
</div>
<p class="error" ng-show="signUpForm.password2.$error.required&&signUpForm.password2.$touched">密码不可以为空</p>
<p class="error" ng-show="(userdata.password2!=userdata.password)&&signUpForm.password2.$dirty">两次密码不一致</p>
<!-- $dirty 输入框有使用则为true 并且两次密码值不一样 -->
<p class="fa fa-check result success" ng-if="signUpForm.password2.$valid"></p>
</form>
<button class="btn btn-primary" ng-disabled="signUpForm.$invalid">注册</button>
</div>
<script src="lib/angular.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>angular.module('myApp',[])
.controller('myCtrl',function($scope){
$scope.userdata={};
$scope.submitForm=function(){
console.log($scope.userdata);
if($scope.signUpForm.$valid)
alert('提交成功！');
else
alert('提交失败！');
}
})
