<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="anjular.js"></script>
<style>
input{
border: 0 none;
}
input[type=button]{
100px;
height: 100%;
}
</style>
</head>
<body ng-app="myApp">
<table border="1" cellspacing="0" ng-controller = "demoCtr">
<tr>
<td>姓名：</td>
<td><input type="text" ng-model = "name"></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="text" ng-model = 'pwd'></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="text" ng-model = "confirmPwd"></td>
</tr>
<tr>
<td>是否同意：</td>
<td><input type="checkbox" ng-model = "istrue"></td>
</tr>
<tr>
<td>提示信息：</td>
<td>{{msg}}</td>
</tr>
<tr>
<td></td>
<td><input type="button" value="提交" ng-click = "register()"></td>
</tr>
</table>
<script>
var app = angular.module('myApp',[]);
app.controller('demoCtr',function($scope){
$scope.name = '';
$scope.pwd = '';
$scope.confirmPwd = '';
$scope.istrue = true;
$scope.register = function(){
if($scope.name.length < 2){
$scope.msg = "请输入正确的用户名";
return ;
}
if($scope.pwd != $scope.confirmPwd){
$scope.msg = "两次密码不一致";
return;
}
if(!$scope.istrue){
$scope.msg = "请选择条款";
return;
}
var result = new User($scope.name,$scope.pwd);
var isHave = result.save();
// 如果数据库中有提示登录
// 如果没有就保存到数据库
if(isHave){
$scope.msg = "注册成功";
}else{
$scope.msg = "已注册请登录";
}
}
});
//用H5的本地存储模拟用后台查询到的数据
function User(name,pwd){
this.name = name;
this.pwd = pwd;
}
User.prototype.save = function(){
var str = localStorage.getItem('users');
var arr = JSON.parse(str || '[]');
for(var i=0;i<arr.length;i++){
if(arr[i].name == this.name){
return false;
}
}
arr.push({'name':this.name,'pwd':this.pwd});
localStorage.setItem('users',JSON.stringify(arr));
return true;
}
</script>
</body>
</html>