自己写的运用bootstrap和angulajs框架写的demo

登录html：

<body ng-app="mainapp">
<div class="container">
<div class="col-sm-6 col-sm-offset-3 form-box">
<div class="form-top">
<div class="form-top-left col-sm-offset-4" style="margin-bottom: 30px;">
<h3>登    录</h3>
</div>
</div>
<div class="form-bottom" ng-controller="maincontroller">
<form class="form-horizontal" role="form" name="myForm" novalidate>
<div class="form-group has-feedback">
<label for="Username" class="col-sm-2 control-label">账   号：</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="Username" name="inputUsername" placeholder="请输入用户名" ng-model="inputUsername" required>
<span class="glyphicon glyphicon-user form-control-feedback"></span>
<span style="color:red" ng-show="myForm.inputUsername.$dirty && myForm.inputUsername.$invalid">
<span ng-show="myForm.inputUsername.$error.required">用户名是必须的</span>
</span>
</div>
</div>
<div class="form-group has-feedback">
<label for="Password" class="col-sm-2 control-label">密   码：</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="Password" name="inputPassword" placeholder="请输入密码" ng-model="inputPassword" required>
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
<span style="color:red" ng-show="myForm.inputPassword.$dirty && myForm.inputPassword.$invalid">
<span ng-show="myForm.inputPassword.$error.required">密码至少六位</span>
</span>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-6">
<div class="checkbox">
<label>
<input type="checkbox"> 请记住我
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-6">
<button type="submit" ng-click="login()" class="btn btn-primary"><span class="glyphicon glyphicon-lock"></span> 登  录</button>
<span class="col-sm-offset-2"><a href="./sign.html">注  册</a></span>
<div class="col-sm-6 col-sm-offset-2" style="margin-top: 15px;">
<a href="./forgetpassword.html"><strong>忘记密码？</strong></a>
</div>
</div>
</div>
</form>
</div>
</div>
</body>

angular.module("mainapp", [])
.controller("maincontroller", function($scope,$http) {
$scope.inputUsername = "";
$scope.inputPassword = "";

//登录
$scope.login = function() {
if(checkFirst() != false) {
login_ajax($scope.inputUsername, $scope.inputPassword);
} else {
alert("请将信息填写完整...");
};
};

function checkFirst() {
if($scope.inputUsername != null && $scope.inputUsername != "" &&
$scope.inputPassword != null && $scope.inputPassword != "") {
return true;
} else {
return false;
}
};

/* 方式二：
$.ajax({
type: "post",
url: "http://192.168.1.220:8080/ph4/user.action?method=mobiLogin1&encodeVersion=4",
data: {
"loginName": this.username,
"loginPassword": this.password
},
contentType: "application/x-www-form-urlencoded;charset=utf-8",
dataType: "json",
async: true, //异步请求
cache: false, //不缓存
success: function(data) {
console.log("data:" + data);
$scope.$apply(function() {
console.log("data.error:" + data.error);
console.log("data.error_msg:" + data.error_msg);
console.log("user:" + data.user);
if(data.error == 1 && data.error_msg == "loginName_not_exist") {
$scope.inputUsername = "";
$scope.inputPassword = "";
alert("该用户不存在!");
} else if(data.error == 1 && data.error_msg == "Password_error") {
$scope.inputUsername = "";
$scope.inputPassword = "";
alert("密码错误!");
} else if(data.user !== null) {
alert("登录成功!");
$(function () {
window.location.href = "main.html";
})
}
});
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("登录失败！");
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
alert(errorThrown);
}
});*/
};
})

界面：

注册html:

<body ng-app="regist">
<div class="container">
<div class="col-sm-6 col-sm-offset-3 form-box">
<div class="form-top">
<div class="form-top-left col-sm-offset-4" style="margin-bottom: 30px;">
<h3>注     册</h3>
</div>
</div>
<div class="form-bottom" ng-controller="registcontroller">
<form class="form-horizontal" role="form" name="myForm" novalidate>
<div class="form-group">
<label class="col-sm-2 control-label" for="userName">账    号：</label>
<div class="col-sm-6">
<input type="number" id="userName" class="form-control" ng-minlength="11" ng-maxlength="11" name="inputUsername" placeholder="请输入手机号" ng-model="inputUsername" required>
<span style="color:red" ng-show="myForm.inputUsername.$dirty && myForm.inputUsername.$invalid">
<span ng-show="myForm.inputUsername.$error.required">账号是必须的</span>
</span>
</div>

</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="nickName">昵    称：</label>
<div class="col-sm-6">
<input type="text" id="nickName" class="form-control" placeholder="请填写昵称" ng-model="inputNickname">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="username">性    别：</label>
<div class="col-sm-6">
<label class="radio-inline">
<input type="radio" name="selectState" ng-value=0 ng-model="inputSex" ng-checked="true"> 男
</label>
<label class="radio-inline">
<input type="radio" name="selectState" ng-value=1 ng-model="inputSex" > 女
</label>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="password">密    码：</label>
<div class="col-sm-6">
<input type="password" id="password" class="form-control" ng-minlength="6" ng-maxlength="18" name="password" placeholder="请输入密码" ng-model="password" required>
<span style="color:red" ng-show="myForm.password.$invalid">
<span ng-show="myForm.password.$error.minlength">密码长度小于6位</span>
<span ng-show="myForm.password.$error.maxlength">密码长度不超过20位</span>
</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="password">再次确认密码：</label>
<div class="col-sm-6">
<input type="password" id="password" class="form-control" name="inputPassword" placeholder="请在输入一遍密码" ng-model="inputPassword" required>
<span style="color:red" ng-show="myForm.inputPassword.$valid">
<span ng-show="inputPassword!=password">两次密码输入不一致</span>
</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="birthday">生    日：</label>
<div class="col-sm-6">
<input type="date" id="birthday" class="form-control" placeholder="请填写生日" ng-model="inputBirthday">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="birthday">邮    箱：</label>
<div class="col-sm-6">
<input type="email" id="email" class="form-control" name="inputEmail" placeholder="请填写邮箱" ng-model="inputEmail" required>
<span style="color:red" ng-show="myForm.inputEmail.$dirty && myForm.inputEmail.$invalid">
<span ng-show="myForm.inputEmail.$error.required">邮箱是必须的</span>
<span ng-show="myForm.inputEmail.$error.email">email地址不正确</span>
</span>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-6">
<button type="submit" ng-click="register()" class="btn btn-success" ng-disabled="myForm.inputUsername.$invalid||myForm.password.$invalid||inputPassword!=password">注  册</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>

regist.js：

angular.module("regist", [])
.controller("registcontroller", function($scope,$http) {
$scope.inputUsername = "";
$scope.inputNickname = "";
$scope.inputSex = "";
$scope.inputPassword = "";
$scope.inputBirthday = "";
$scope.inputEmail = "";

界面截图：

登录成功跳转的主页面main.html：

app.js：

界面截图：

md5.js：

/*
* A JavaScript implementation of the RSA Data Security, Inc. MD5 Message
* Digest Algorithm, as defined in RFC 1321.
* Version 2.1 Copyright (C) Paul Johnston 1999 - 2002.
* Other contributors: Greg Holt, Andrew Kepert, Ydnar, Lostinet
* Distributed under the BSD License
* See http://pajhome.org.uk/crypt/md5 for more info.
*/

/*
* Configurable variables. You may need to tweak these to be compatible with
* the server-side, but the defaults work in most cases.
*/
var hexcase = 0; /* hex output format. 0 - lowercase; 1 - uppercase */
var b64pad = ""; /* base-64 pad character. "=" for strict RFC compliance */
var chrsz = 8; /* bits per input character. 8 - ASCII; 16 - Unicode */

/*
* These are the functions you'll usually want to call
* They take string arguments and return either hex or base-64 encoded strings
*/
function hex_md5(s){ return binl2hex(core_md5(str2binl(s), s.length * chrsz));}
function b64_md5(s){ return binl2b64(core_md5(str2binl(s), s.length * chrsz));}
function str_md5(s){ return binl2str(core_md5(str2binl(s), s.length * chrsz));}
function hex_hmac_md5(key, data) { return binl2hex(core_hmac_md5(key, data)); }
function b64_hmac_md5(key, data) { return binl2b64(core_hmac_md5(key, data)); }
function str_hmac_md5(key, data) { return binl2str(core_hmac_md5(key, data)); }

/*
* Perform a simple self-test to see if the VM is working
*/
function md5_vm_test()
{
return hex_md5("abc") == "900150983cd24fb0d6963f7d28e17f72";
}

/*
* Calculate the MD5 of an array of little-endian words, and a bit length
*/
function core_md5(x, len)
{
/* append padding */
x[len >> 5] |= 0x80 << ((len) % 32);
x[(((len + 64) >>> 9) << 4) + 14] = len;

var a = 1732584193;
var b = -271733879;
var c = -1732584194;
var d = 271733878;

for(var i = 0; i < x.length; i += 16)
{
var olda = a;
var oldb = b;
var oldc = c;
var oldd = d;

a = md5_ff(a, b, c, d, x[i+ 0], 7 , -680876936);
d = md5_ff(d, a, b, c, x[i+ 1], 12, -389564586);
c = md5_ff(c, d, a, b, x[i+ 2], 17, 606105819);
b = md5_ff(b, c, d, a, x[i+ 3], 22, -1044525330);
a = md5_ff(a, b, c, d, x[i+ 4], 7 , -176418897);
d = md5_ff(d, a, b, c, x[i+ 5], 12, 1200080426);
c = md5_ff(c, d, a, b, x[i+ 6], 17, -1473231341);
b = md5_ff(b, c, d, a, x[i+ 7], 22, -45705983);
a = md5_ff(a, b, c, d, x[i+ 8], 7 , 1770035416);
d = md5_ff(d, a, b, c, x[i+ 9], 12, -1958414417);
c = md5_ff(c, d, a, b, x[i+10], 17, -42063);
b = md5_ff(b, c, d, a, x[i+11], 22, -1990404162);
a = md5_ff(a, b, c, d, x[i+12], 7 , 1804603682);
d = md5_ff(d, a, b, c, x[i+13], 12, -40341101);
c = md5_ff(c, d, a, b, x[i+14], 17, -1502002290);
b = md5_ff(b, c, d, a, x[i+15], 22, 1236535329);

a = md5_gg(a, b, c, d, x[i+ 1], 5 , -165796510);
d = md5_gg(d, a, b, c, x[i+ 6], 9 , -1069501632);
c = md5_gg(c, d, a, b, x[i+11], 14, 643717713);
b = md5_gg(b, c, d, a, x[i+ 0], 20, -373897302);
a = md5_gg(a, b, c, d, x[i+ 5], 5 , -701558691);
d = md5_gg(d, a, b, c, x[i+10], 9 , 38016083);
c = md5_gg(c, d, a, b, x[i+15], 14, -660478335);
b = md5_gg(b, c, d, a, x[i+ 4], 20, -405537848);
a = md5_gg(a, b, c, d, x[i+ 9], 5 , 568446438);
d = md5_gg(d, a, b, c, x[i+14], 9 , -1019803690);
c = md5_gg(c, d, a, b, x[i+ 3], 14, -187363961);
b = md5_gg(b, c, d, a, x[i+ 8], 20, 1163531501);
a = md5_gg(a, b, c, d, x[i+13], 5 , -1444681467);
d = md5_gg(d, a, b, c, x[i+ 2], 9 , -51403784);
c = md5_gg(c, d, a, b, x[i+ 7], 14, 1735328473);
b = md5_gg(b, c, d, a, x[i+12], 20, -1926607734);

a = md5_hh(a, b, c, d, x[i+ 5], 4 , -378558);
d = md5_hh(d, a, b, c, x[i+ 8], 11, -2022574463);
c = md5_hh(c, d, a, b, x[i+11], 16, 1839030562);
b = md5_hh(b, c, d, a, x[i+14], 23, -35309556);
a = md5_hh(a, b, c, d, x[i+ 1], 4 , -1530992060);
d = md5_hh(d, a, b, c, x[i+ 4], 11, 1272893353);
c = md5_hh(c, d, a, b, x[i+ 7], 16, -155497632);
b = md5_hh(b, c, d, a, x[i+10], 23, -1094730640);
a = md5_hh(a, b, c, d, x[i+13], 4 , 681279174);
d = md5_hh(d, a, b, c, x[i+ 0], 11, -358537222);
c = md5_hh(c, d, a, b, x[i+ 3], 16, -722521979);
b = md5_hh(b, c, d, a, x[i+ 6], 23, 76029189);
a = md5_hh(a, b, c, d, x[i+ 9], 4 , -640364487);
d = md5_hh(d, a, b, c, x[i+12], 11, -421815835);
c = md5_hh(c, d, a, b, x[i+15], 16, 530742520);
b = md5_hh(b, c, d, a, x[i+ 2], 23, -995338651);

a = md5_ii(a, b, c, d, x[i+ 0], 6 , -198630844);
d = md5_ii(d, a, b, c, x[i+ 7], 10, 1126891415);
c = md5_ii(c, d, a, b, x[i+14], 15, -1416354905);
b = md5_ii(b, c, d, a, x[i+ 5], 21, -57434055);
a = md5_ii(a, b, c, d, x[i+12], 6 , 1700485571);
d = md5_ii(d, a, b, c, x[i+ 3], 10, -1894986606);
c = md5_ii(c, d, a, b, x[i+10], 15, -1051523);
b = md5_ii(b, c, d, a, x[i+ 1], 21, -2054922799);
a = md5_ii(a, b, c, d, x[i+ 8], 6 , 1873313359);
d = md5_ii(d, a, b, c, x[i+15], 10, -30611744);
c = md5_ii(c, d, a, b, x[i+ 6], 15, -1560198380);
b = md5_ii(b, c, d, a, x[i+13], 21, 1309151649);
a = md5_ii(a, b, c, d, x[i+ 4], 6 , -145523070);
d = md5_ii(d, a, b, c, x[i+11], 10, -1120210379);
c = md5_ii(c, d, a, b, x[i+ 2], 15, 718787259);
b = md5_ii(b, c, d, a, x[i+ 9], 21, -343485551);

a = safe_add(a, olda);
b = safe_add(b, oldb);
c = safe_add(c, oldc);
d = safe_add(d, oldd);
}
return Array(a, b, c, d);

}

/*
* These functions implement the four basic operations the algorithm uses.
*/
function md5_cmn(q, a, b, x, s, t)
{
return safe_add(bit_rol(safe_add(safe_add(a, q), safe_add(x, t)), s),b);
}
function md5_ff(a, b, c, d, x, s, t)
{
return md5_cmn((b & c) | ((~b) & d), a, b, x, s, t);
}
function md5_gg(a, b, c, d, x, s, t)
{
return md5_cmn((b & d) | (c & (~d)), a, b, x, s, t);
}
function md5_hh(a, b, c, d, x, s, t)
{
return md5_cmn(b ^ c ^ d, a, b, x, s, t);
}
function md5_ii(a, b, c, d, x, s, t)
{
return md5_cmn(c ^ (b | (~d)), a, b, x, s, t);
}

/*
* Calculate the HMAC-MD5, of a key and some data
*/
function core_hmac_md5(key, data)
{
var bkey = str2binl(key);
if(bkey.length > 16) bkey = core_md5(bkey, key.length * chrsz);

var ipad = Array(16), opad = Array(16);
for(var i = 0; i < 16; i++)
{
ipad[i] = bkey[i] ^ 0x36363636;
opad[i] = bkey[i] ^ 0x5C5C5C5C;
}

var hash = core_md5(ipad.concat(str2binl(data)), 512 + data.length * chrsz);
return core_md5(opad.concat(hash), 512 + 128);
}

/*
* Add integers, wrapping at 2^32. This uses 16-bit operations internally
* to work around bugs in some JS interpreters.
*/
function safe_add(x, y)
{
var lsw = (x & 0xFFFF) + (y & 0xFFFF);
var msw = (x >> 16) + (y >> 16) + (lsw >> 16);
return (msw << 16) | (lsw & 0xFFFF);
}

/*
* Bitwise rotate a 32-bit number to the left.
*/
function bit_rol(num, cnt)
{
return (num << cnt) | (num >>> (32 - cnt));
}

/*
* Convert a string to an array of little-endian words
* If chrsz is ASCII, characters >255 have their hi-byte silently ignored.
*/
function str2binl(str)
{
var bin = Array();
var mask = (1 << chrsz) - 1;
for(var i = 0; i < str.length * chrsz; i += chrsz)
bin[i>>5] |= (str.charCodeAt(i / chrsz) & mask) << (i%32);
return bin;
}

/*
* Convert an array of little-endian words to a string
*/
function binl2str(bin)
{
var str = "";
var mask = (1 << chrsz) - 1;
for(var i = 0; i < bin.length * 32; i += chrsz)
str += String.fromCharCode((bin[i>>5] >>> (i % 32)) & mask);
return str;
}

/*
* Convert an array of little-endian words to a hex string.
*/
function binl2hex(binarray)
{
var hex_tab = hexcase ? "0123456789abcdef" : "0123456789ABCDEF";
var str = "";
for(var i = 0; i < binarray.length * 4; i++)
{
str += hex_tab.charAt((binarray[i>>2] >> ((i%4)*8+4)) & 0xF) +
hex_tab.charAt((binarray[i>>2] >> ((i%4)*8 )) & 0xF);
}
return str;
}

/*
* Convert an array of little-endian words to a base-64 string
*/
function binl2b64(binarray)
{
var tab = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
var str = "";
for(var i = 0; i < binarray.length * 4; i += 3)
{
var triplet = (((binarray[i >> 2] >> 8 * ( i %4)) & 0xFF) << 16)
| (((binarray[i+1 >> 2] >> 8 * ((i+1)%4)) & 0xFF) << 8 )
| ((binarray[i+2 >> 2] >> 8 * ((i+2)%4)) & 0xFF);
for(var j = 0; j < 4; j++)
{
if(i * 8 + j * 6 > binarray.length * 32) str += b64pad;
else str += tab.charAt((triplet >> 6*(3-j)) & 0x3F);
}
}
return str;
}

自己写的运用bootstrap和angulajs框架写的demo的更多相关文章

写自己的ASP.NET MVC框架（上）
http://www.cnblogs.com/fish-li/archive/2012/02/12/2348395.html 阅读目录开始 ASP.NET程序的几种开发方式介绍我的MVC框架我的 ...
bootstrap 中是通过写less文件来生成css文件，用什么工具来编写呢？
bootstrap 中是通过写less文件来生成css文件,用什么工具来编写呢? 如果用sublime的话如何实现代码保存后浏览器刷新成最新的代码样式? 或者有什么其他好用的工具? 从网上找了很多方法 ...
为了支持AOP的编程模式，我为.NET Core写了一个轻量级的Interception框架[开源]
ASP.NET Core具有一个以ServiceCollection和ServiceProvider为核心的依赖注入框架,虽然这只是一个很轻量级的框架,但是在大部分情况下能够满足我们的需要.不过我觉得 ...
8个强大的基于Bootstrap的CSS框架
做过前端开发的小伙伴们应该对Bootstrap不会陌生,它是由Twitter推出的开源CSS框架,其中包含了很多Web前端开发的工具包和应用组件.当然,和jQuery一样,Bootstrap同时也是一 ...
使用Strust2框架写HelloWorld
使用Strust2框架写HelloWorld 一.创建JavaWeb项目二.搭建Stust2 FrameWork开发环境三步完成Struts2 FrameWork开发环境的搭建 1.加入搭建Str ...
写自己的ASP.NET MVC框架（下）
上篇博客[写自己的ASP.NET MVC框架(上)] 我给大家介绍我的MVC框架对于Ajax的支持与实现原理.今天的博客将介绍我的MVC框架对UI部分的支持. 注意:由于这篇博客是基于前篇博客的,因此 ...
从零开始写一个武侠冒险游戏-0-开发框架Codea简介
从零开始写一个武侠冒险游戏-0-开发框架Codea简介作者:FreeBlues 修订记录 2016.06.21 初稿完成. 2016.08.03 增加对 XCode 项目文件的说明. 概述本游戏全 ...
使用 Flask 框架写用户登录功能的Demo时碰到的各种坑（五）——实现注册功能
使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(一)——创建应用使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(二)——使用蓝图功能进行模块化使用 Flask 框架写用 ...
使用 Flask 框架写用户登录功能的Demo时碰到的各种坑（四）——对 run.py 的调整
使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(一)——创建应用使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(二)——使用蓝图功能进行模块化使用 Flask 框架写用 ...

随机推荐

《FPGA全程进阶---实战演练》第五章基于74HC595的LED操作
1基础理论部分 1.1分频分频,是的,这个概念也很重要.分频是指将一单一频率信号的频率降低为原来的1/N,就叫N分频.实现分频的电路或装置称为“分频器”,如把33MHZ的信号2分频得到16.5MHZ ...
Mysql系列二:Mysql 开发标准规范
原文链接:http://www.cnblogs.com/liulei-LL/p/7729983.html 一.表设计 1. 库名.表名.字段名使用小写字母,“_”分割. 2. 库名.表名.字段名不超过 ...
嵌入式开发之hi3519---GPIO 驱动
在一个嵌入式系统中使用最多的莫过于通用输入输出 GPIO口.看到论坛中经常有朋友问海思为什么没有提供GPIO驱动.其实不然. 在海思SDK xxx/osdrv/tools/board_tools/ ...
Socket 相关资料（随笔）
由于项目上的 http 请求量较大,项目上性能跟不上.于是考虑把短连接的 http 换成长连接的tcp 形式试试效果. 先研究了一下长连接方式.就是要用到 socket 方面的知识. pac ...
网络编程 -- RPC实现原理 -- Netty -- 迭代版本V4 -- 粘包拆包
网络编程 -- RPC实现原理 -- 目录啦啦啦 V2——Netty -- new LengthFieldPrepender(2) : 设置数据包 2 字节的特征码 new LengthFieldB ...
mysql 冷热备份
文章转自:http://www.linuxidc.com/Linux/2014-03/98710.htm 冷备份(OFF, 慢, 时间点上恢复)冷备份发生在数据库已经正常关闭的情况下,当正常关闭时会提 ...
使用Anaconda3配置多版本Python虚拟开发环境
有时候,为了使用比较干净的开发环境,或者为了测试一些版本的扩展库,我们可能需要创建虚拟开发环境,在不同的虚拟开发环境中,只安装需要的扩展库,这样可以最大程度上减少不同扩展库之间的兼容性带来的冲突或其他 ...
[原]openstack-kilo--issue(九) heat stacks topology中图形无法正常显示
本博客已经添加"打赏"功能,"打赏"位置位于右边栏红色框中,感谢您赞助的咖啡. ======声明======= 欢迎转载:转载请注明出处 http://www. ...
1. Mysql数据库的安装
1. Mysql数据库的安装 (1)打开Mysql安装软件,同意相关协议进入下一步安装,在选择安装类型中选择[自定义]进入下一步安装. (2)选择安装的组件信息. (3)服务器软件安装目录 (4)数据 ...
day_10py 简单地名字管理系统
#!/usr/bin/env/python #-*-coding:utf-8-*- ''' 名字管理系统做程序迭代,由点到面一点一点来 ''' # 1.打印功能提示 print("=&qu ...

自己写的运用bootstrap和angulajs框架写的demo

自己写的运用bootstrap和angulajs框架写的demo的更多相关文章

随机推荐

热门专题