<html ng-app="registerAppModule">
<head lang="en">
<title></title>
<link data-require="bootstrap@3.2.0" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<script data-require="jquery@2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="angular.js@1.3.0-rc2" data-semver="1.3.0-rc2" src="https://code.angularjs.org/1.3.0-rc.2/angular.js"></script>
<script data-require="bootstrap@3.2.0" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
<script src="https://rawgit.com/angular-ui/ui-router/0.2.11/release/angular-ui-router.js"></script>
<script src="registerApp.js"></script>
<script src="registerController.js"></script>
<script src="cacheMethod.js"></script>
</head>
<body>
<div class="panel panel-primary" align="center" style="width: 35em ;margin-left: auto;margin-right: auto;">
<div class="panel-heading">Register</div>
<div class="panel-body bg-warning" align="center" ui-view=""></div>
</div>
</body>
</html>
<form name="registerForm" class="form-inline" ng-submit="submit(registerForm.$valid)" novalidate>
<div class="form-group" ng-class="getFormGroupClass(registerForm.idText)">
<label class="control-label" for='passwordText'>User Name:</label>
<input type="text" class="form-control" id="idText" name="idText" placeholder="Enter your User Name..." ng-model="idText" required>
<span ng-show="registerForm.idText.$dirty" ng-class="getGlyphIconClass(registerForm.idText)"></span>
<br />
<label class="control-label" ng-show="isRequired(registerForm.idText)">*Required</label>
</div>
<p>
<div class="form-group" ng-class="getFormGroupClass(registerForm.passwordText)">
<label class="control-label" for='passwordText'>Password:</label>
<input type="password" class="form-control" id="passwordText" name="passwordText" placeholder="Enter your password..." ng-model="passwordText" ng-pattern="passwordPattern" required>
<span ng-show="registerForm.passwordText.$dirty" ng-class="getGlyphIconClass(registerForm.passwordText)"></span>
<br />
<label class="control-label" ng-show="isRequired(registerForm.passwordText)">*Required</label>
<label class="control-label" ng-show="registerForm.passwordText.$error.pattern">*Required 8-12 characters with a-z and 0-9</label>
</div>
<p>
<div ng-class="getFormGroupClass(registerForm.emailText)">
<label class="control-label" for='emailText'>Email:</label>
<input type="email" class="form-control" id="emailText" name="emailText" placeholder="Enter your email..." ng-model="emailText" required/>
<span ng-show="registerForm.emailText.$dirty" ng-class="getGlyphIconClass(registerForm.emailText)"></span>
<br />
<label class="control-label left" ng-show="isRequired(registerForm.emailText)">*Required</label>
<label class="control-label left" ng-show="registerForm.emailText.$error.email">*Invalid email</label>
</div>
<p>
<button type="submit" class="btn btn-info" ng-disabled="registerForm.$invalid">Submit</button>
</form>
Your name is:{{userNameMessage}}
<br />
Your password is:{{passwordMessage|passwordFilter}}
<br />
Your email is :{{emailMessage}}
<p>
<a ui-sref="register" class="btn btn-info">go back</a>
/**
* Created by WillChen on 2014/10/13.
*/
(function () {
angular.module('registerAppModule', ['ui.router','registerControllerModule'])
.config(function($stateProvider,$urlRouterProvider,$locationProvider){
$urlRouterProvider.otherwise("/register");
$stateProvider.state('register',{
url: '/register',
templateUrl: 'register.html',
controller: 'registerController'
}).state('message',{
url: '/message',
templateUrl: 'register.message.html',
controller: 'messageController'
})
})
})();
/**
* Created by WillChen on 2014/10/13.
*/
(function(){
angular.module('registerControllerModule',['ui.router','cacheMethodModule'])
.filter('passwordFilter',function(){
return function(str,symbol){//保留密碼的頭跟尾，中間字串取代成自訂符號
if (!symbol) symbol = '*';
if (!str) return;
var fixShowLength = 2;
var maskLength,replaceSourceStr,replaceTargetStr;
if (str.length <= fixShowLength){
maskLength = str.length;
replaceSourceStr = str;
}else{
maskLength = str.length - fixShowLength;
replaceSourceStr = str.substr(1,maskLength);
}
replaceTargetStr = '';
for (var i = 0;i < maskLength;i++) replaceTargetStr += symbol;
str = str.replace(replaceSourceStr,replaceTargetStr);
return str;
}
})
.controller('registerController',function($scope,$state,cacheMethodService){
$scope.passwordPattern = /(?=^.{8,12}$)(?=.*\d)(?![.\n])(?=.*[a-z]).*$/;//配對8-12個英數混和字元
$scope.submit = function(isValid){
if (!isValid) return;
cacheMethodService.saveCache('tmpParameter',{//傳參用
'username': $scope.idText,
'password': $scope.passwordText,
'email': $scope.emailText
});
$state.go('message');
};
$scope.getFormGroupClass = function(groupControls){
if (!groupControls.$dirty) return;//若該Controls未修過值則不動作
return groupControls.$invalid?'form-group has-error has-feedback':'form-group has-success has-feedback';//回傳驗證過與未驗證過的樣板
}
$scope.getGlyphIconClass = function(groupControls){
return groupControls.$valid?'glyphicon glyphicon-ok form-control-feedback':'glyphicon glyphicon-remove form-control-feedback';//回傳驗證過與未驗證過的小圖示
}
$scope.isRequired = function(groupControls){
return groupControls.$error.required && groupControls.$dirty;//判斷是否符合必填限制
}
})
.controller('messageController',function($scope,cacheMethodService){
$scope.$on('$viewContentLoaded', function () {//當頁面載入時讀取cache中傳參的值
$scope.onLoad()
});
$scope.onLoad = function () {
var cacheDatas = cacheMethodService.getCache('tmpParameter');
$scope.userNameMessage = cacheDatas['username'];
$scope.passwordMessage = cacheDatas['password'];
$scope.emailMessage = cacheDatas['email'];
}
})
})();
/**
* Created by WillChen on 2014/10/13.
*/
(function(){
angular.module('cacheMethodModule',[])
.service('cacheMethodService',function($cacheFactory){
var cache = $cacheFactory('myCache');
var saveCache = function(key,values){
cache.put( key, values );
}
var getCache = function(key){
var result = cache.get(key);
return !result?"":result;
}
return{
saveCache: saveCache,
getCache: getCache
}
})
})();