做了一个后台登陆验证,新手望指正

分享 未结 5 2401
乐Q
乐Q 2017-12-13
悬赏:20飞吻
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>后台管理系统</title>
<link rel="stylesheet" href="/libs/layui/css/layui.css">
<link rel="stylesheet" href="/styles/css/login.css">
<script src="/styles/js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="/libs/layui/layui.js" type="text/javascript"></script>
</head>


<body>
<body id="login">
<div class="login">
<h2>网站后台管理</h2>
<form class="layui-form">
<div class="layui-form-item">
<input type="text" name="username" placeholder="账号:" required lay-verify="username" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-item">
<input type="password" name="password" placeholder="密码:" required lay-verify="password" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-item">
<input style="width:100px;float:left;margin-right: 10px;" type="text" name="code" placeholder="验证码" required lay-verify="code" autocomplete="off" class="layui-input">
<img title="点击刷新" src="inc/code.asp" width="150" height="35" style="float:left; cursor:pointer;" onclick="this.src='code.asp?'+Math.random();" alt="captcha"></img>
</div>
<div class="layui-form-item">
<button style="padding: 0 102px;" class="layui-btn" lay-submit="" lay-filter="login">立即登录</button>

</div>
</form>
</div>
</body>
</html>

<script>
layui.use('form', function(){
var form = layui.form;

//自定义验证规则
form.verify({
username: function(value){
if(!value){
return '账户不能为空'
}

},
password:function (value) {
if(!value){
return '密码不能为空'
}
},
code:function (value) {
if(!value){
return '验证码不能为空'
}
}

});


form.on('submit(login)', function(data) {
$.ajax({
async: false,
url: 'inc/check.asp',
data: {'username': data.field.username, 'password': data.field.password, 'code': data.field.code},
type: 'get',
})
.done(function(js) {
if (js =='1'){
layer.msg("正在登陆中请稍后……", {icon: 1, time: 2000});
setTimeout(function() {

window.location.href="/main.htm";//.跳转到登录后的页面
return false;
}, 2000); //.延时跳转,显示登录成功的消息
}
if(js=='0'){
layer.msg("账户错误", {icon: 2, anim: 6, time: 1000});

}
if(js=='2'){
layer.msg("密码错误", {icon: 2, anim: 6, time: 1000});

}
if(js=='3'){
layer.msg("验证码错误", {icon: 2, anim: 6, time: 1000});

}
})


return false; //.这里要返回 false 阻止页面跳转
});


});
</script>
回帖
  • 查无此人
    2017-12-13
    [思考]
    0 回复
  • 虽然我很不想表达什么吧,你这样写很容易躲过的。验证最好做在后台
    0 回复
  • nonelonely
    2017-12-13
    前后端都做验证,双重保证
    0 回复
  • 没毛病,可以这么写啊
    0 回复
  • login.css源码没放出来呢,后端再进行验证一次增加安全性。
    0 回复
本帖已设置禁止回复