我正在创建一个网页，我希望用户拥有用户名和密码，但我不想让用户名重复，我的数据库已经连接到我的网页了他们可以提供他们的信息，例如姓名，用户名，密码等。
我需要帮助，告诉用户如果已输入的用户名已经被用来输入另一个用户名。这是我在HTML / PHP / MySQL中的代码：
<!DOCTYPE html>
<html>
<head>
<title>Skillfair</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="stylesbd_o.css">
</head>
<body>
<section id="header" class="jumbotron">
<header class="container">
<div class="row">
<h2 class="col-sm-4">Database</h2>
<nav class="col-sm-8 text-right">
<p id="btnregister">Register</p>
<!--antes estaba escrito newest en vez de register-->
<p id="btncatalogo">Catalogue</p>
<p id="btnlogin">Login</p>
<!--antes estaba escrito contact en vez de login-->
<p id="btncart">Cart</p>
</nav>
</div>
</header>
</section>
<!--Seccion de la parte del registro -->
<section id="registro1" class="container">
<div id="registro">
<div class="row">
<figure class="col-sm-12">
<form id="form1" name="form1" method="post" action="" onsubmit="return valido()">
<fieldset class="col-sm-12">
<h1>Register <span> now!</span></h1>
<input name="username" type="text" placeholder="You must input your username" maxlength="20">
<input name="password" type="password" placeholder="You must input your password" maxlength="20">
<input name="name" type="text" placeholder="You must input your name(s)" maxlength="20">
<input name="lastname" type="text" placeholder="You must input your lastname" maxlength="20">
<input name="school" type="text" placeholder="You must input your school" maxlength="20">
<input name="age" type="number" placeholder="You must input your age" maxlength="2">
<input name="phone" type="tel" placeholder="You must input your phone number" maxlength="20">
<input name="email" type="email" placeholder="You must input your email" maxlength="35">
<button type="submit">Sent Data</button>
<input id="reset" type="reset" value="Clear fields" id="reset">
</fieldset>
</form>
<p id="sent">
</figure>
</div>
</div>
</section>
<!--Seccion de la parte del catalogo -->
<section class="container">
<div id="catalogo">
<div class="row">
<figure class="col-sm-6">
<p>-kitchen</p>
<img src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/kitchen.jpg"/>
</figure>
<figure class="col-sm-6">
<p>-woodwork</p>
<img src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/woodwork.jpg"/>
</figure>
</div>
<div class="row">
<figure class="col-sm-6">
<p>-gifts</p>
<img src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/gifts.jpg"/>
</figure>
<figure class="col-sm-6">
<p>-antiques</p>
<img src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/antique.jpg"/>
</figure>
</div>
</div>
</section>
<footer class="container">
<div class ="row">
<p class="col-sm-4">© 2016 Skillfair</p>
</div>
</footer>
<!-- Faltan registros (javascript)-->
<script type="text/javascript">
function valido () {
if(document.form1.username.value=="") {
alert ('You must input your username');
document.form1.username.focus();
return false;
}
if(document.form1.password.value=="") {
alert ('You must input your password');
document.form1.password.focus();
return false;
}
if(document.form1.name.value=="") {
alert ('You must input your name');
document.form1.name.focus();
return false;
}
if(document.form1.lastname.value=="") {
alert ('You must input your last name');
document.form1.lastname.focus();
return false;
}
if(document.form1.school.value=="") {
alert ('You must input your school');
document.form1.school.focus();
return false;
}
if(document.form1.age.value=="") {
alert ('You must input your age');
document.form1.age.focus();
return false;
}
if(document.form1.phone.value=="") {
alert ('You must input your phone number');
document.form1.phone.focus();
return false;
}
if(document.form1.email.value=="") {
alert ('You must input your email');
document.form1.email.focus();
return false;
}
else {
alert ('Success!!');
return true;
}
}
</script>
<script>
/* script para la apertura y cierre del boton register */
$(document).ready(function(){
$("#btnregister").click(function(){
$("#registro").fadeToggle("slow");
$("#catalogo").hide();
});
$("#registro").hide();
});
/* script para la apertura y cierre del boton catalogo */
$(document).ready(function(){
$("#btncatalogo").click(function(){
$("#catalogo").fadeToggle("slow");
$("#registro").hide();
});
$("#catalogo").hide();
});
</script>
<?php
//Connect to database
mysql_pconnect('localhost:8889','xxxx','xxxx');
//***********************
//Select database
mysql_select_db('users');
//***********************
//Insert data into database
if (isset($_POST['username']))
{
$username=$_POST['username'];
$password=$_POST['password'];
$name=$_POST['name'];
$lastname=$_POST['lastname'];
$school=$_POST['school'];
$age=$_POST['age'];
$phone=$_POST['phone'];
$email=$_POST['email'];
$cad="insert into users.data (username, password, name, lastname, school, age, phone, email) values ('".$username."','".$password."','".$name."','".$lastname."','".$school."','".$age."','".$phone."','".$email."') ";
mysql_query($cad);
}
?>
</body>
</html>
我很抱歉，如果评论和其他一些内容都是西班牙语，因为我的代码原本是西班牙语，但我尽可能地翻译它，所以请，如果有人可以帮助我解决这个问题会很棒!!
答案 0 :(得分：0)
您可以使用ajax实现该功能。只需将数据发布到php文件，该文件使用ajax检查重复。
以下是一个可以解决您问题的示例。
<强> HTML
<input type="text" id="user" name="user" disabled="true" required><br><span id="usererr"></span>
jquery代码
$("#user").keyup(function (e) {
e.preventDefault();
var user = $(this).val();
var dataString = 'user=' + user;
$.ajax({
type: 'POST',
url: 'checkusername.php',
data: dataString,
cache: false,
success: function (html)
{
$("#usererr").html(html);
}
});
});
PHP（CODE checkuser.php）
if($_POST)
{
if(isset($_POST['user']))
{
$user= strtolower(sanitizeString($_POST['user']));
$query="select * from users.data where username='".$user."'";
$result= mysql_query($query);
if(mysql_num_rows($result)==0)
{
echo '<font color="green">Username is Available</font><br>';
}
else
{
echo '<font color="red">Username is already taken. Please select another username.</font><br>';
echo '<script language="javascript">var user=document.getElementById("user");'
. 'user.value="";</script>';
}
}
}
注意：mysql_ *函数已折旧且不再使用。我根据您的需要提供了代码。强烈建议您升级到mysqli_ *函数。