假如你的系统是很多妹子用的，比如OA，ERP系统，这个模版还是挺适合的。
动态GIT体验下，浪漫雪花
输入密码，猫头鹰同志还懵逼小闭眼
用这种系统做界面，夏天心情凉爽。
干活就起劲。
好了，如果觉得这个登录页面模版还可以，如果需要的话，往下看：
部分源码：
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
登录
(function() {
if (!String.prototype.trim) {
(function() {
var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
String.prototype.trim = function() {
return this.replace(rtrim, '');
};
})();
}
[].slice.call( document.querySelectorAll( 'input.input__field' ) ).forEach( function( inputEl ) {
// in case the input is already filled..
if( inputEl.value.trim() !== '' ) {
classie.add( inputEl.parentNode, 'input--filled' );
}
// events:
inputEl.addEventListener( 'focus', onInputFocus );
inputEl.addEventListener( 'blur', onInputBlur );
} );
function onInputFocus( ev ) {
classie.add( ev.target.parentNode, 'input--filled' );
}
function onInputBlur( ev ) {
if( ev.target.value.trim() === '' ) {
classie.remove( ev.target.parentNode, 'input--filled' );
}
}
})();
//注册
//判断用户名密码是否为空
if(password == ""){
$.pt({
target: $("#register-password"),
position: 'r',
align: 't',
width: 'auto',
height: 'auto',
content:"密码不能为空"
});
flag = true;
}else{
if(password != repassword){
$.pt({
target: $("#register-repassword"),
position: 'r',
align: 't',
width: 'auto',
height: 'auto',
content:"两次输入的密码不一致"
});
flag = true;
}
}
//用户名只能是15位以下的字母或数字
var regExp = new RegExp("^[a-zA-Z0-9_]{1,15}$");
if(!regExp.test(username)){
$.pt({
target: $("#register-username"),
position: 'r',
align: 't',
width: 'auto',
height: 'auto',
content:"用户名必须为15位以下的字母或数字"
});
flag = true;
}
//重置密码
//判断用户名密码是否为空
if(username == ""){
$.pt({
target: $("#forget-username"),
position: 'r',
align: 't',
width: 'auto',
height: 'auto',
content:"用户名不能为空"
});
flag = true;
}
if(password == ""){
$.pt({
target: $("#forget-password"),
position: 'r',
align: 't',
width: 'auto',
height: 'auto',
content:"密码不能为空"
});
flag = true;
}
//用户名只能是15位以下的字母或数字
var regExp = new RegExp("^[a-zA-Z0-9_]{1,15}$");
if(!regExp.test(username)){
$.pt({
target: $("#forget-username"),
position: 'r',
align: 't',
width: 'auto',
height: 'auto',
content:"用户名必须为15位以下的字母或数字"
});
flag = true;
}
完整模版获取方式:
扫码关注微信公众号：java小白逆袭之路 回复 html12 领取
【java小白逆袭之路】公众号
感谢老铁支持！！！
