这是我的HTML文件中的下拉登录框。我在后端使用快递和护照。有没有办法验证密码而无需重新加载整个页面?同时,如何处理一些弹出的消息,如:“没有找到用户名”,“密码错误”..?
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Log In <span class="caret"></span></a>
<ul class="dropdown-menu dropdown-lr animated slideInRight" role="menu">
<div class="col-lg-12">
<div class="text-center"><h3><b>Log In</b></h3></div>
<form id="ajax-login-form" action="/login" method="post" role="form" autocomplete="off">
<!-- show any messages that come back with authentication -->
<% if (message.length > 0) { %>
<div class="alert alert-danger"><%= message %></div>
<% } %>
<div class="form-group">
<label for="username">Email</label>
<input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Email" autocomplete="off">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Password" autocomplete="off">
</div>
<div class="form-group">
<div class="row">
<div class="col-xs-7">
<input type="checkbox" tabindex="3" name="remember" id="remember">
<label for="remember"> Remember Me</label>
</div>
<div class="col-xs-5 pull-right">
<input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-success" value="Log In">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-lg-12">
<div class="text-center">
<a href="#" tabindex="5" class="forgot-password">Forgot Password?</a>
</div>
</div>
</div>
</div>
</form>
</div>
</ul>
</li>
答案 0 :(得分:2)
<script type="text/javascript">
function checkusername(){
var username=$("#username").val(); // get username value on blur event
$.ajax({
type:'post',
url:'checkusername.php',// path to php file that validate username
data:{username: username},
success:function(errmsg){
alert(errmsg);
}
});
}
</script>
<p>Username <input type="text" name="username" id="username" onblur="checkusername()" required></p>
PHP
$echeck="select username from register where username=".$_POST['username'];
$echk=mysql_query($echeck);
$ecount=mysql_num_rows($echk);
if($ecount!=0)
{
echo "username already exists";
}
注意:同样您也可以验证密码
答案 1 :(得分:0)
你的表格是这样的:
<!-- show any messages that come back with authentication -->
<div id="message"></div>
.......
.......
<div class="col-xs-5 pull-right">
<input type="button" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-success" value="Log In">
</div>
脚本ajax:
<script>
$('#login-submit').click(function(){
var usrnm = $('#username').val();
var pwd = $('#password').val();
$.ajax({
type:'post',
url:'check.php',// path to check username and pwd
data:{username: usrnm,password:pwd},
success:function(msg){
if(msg=='1'){
$('#message').html('');
alert('redirect to wherever u want');
//window.location = 'http://example.com/username='+usrnm
}else{
$('#message').html(msg);
}
}
});
});
</script>
check.php:
<?php
$username = $_POST['username'];
$password = $_POST['password'];
//note:u can edit as u like. how to check
if($username == 'admin' && $password=='admin'){
echo "1"; //if success
}elseif($username == 'admin' && $password!='admin'){
echo "WRONG PASSWORD"; //fail
}else{
echo "Your Id is not Registered"; //fail
}
?>