使用 javascript 和 php 检查用户名可用性

Question

我正在尝试检查用户名的可用性，但我得到了错误的验证，当我尝试插入现有用户名时，它没有显示正确的消息。

这是 HTML 的代码：

<form method="POST" onSubmit="return shouldIsubmit()" enctype="multipart/form-data">
<tr><td>First Name:</td> <td><input type="text" name="Fname" onKeyUp="checkFName(this.value)"/></td><td><span id='FNMsg'></span></td></tr>
<tr><td>Last Name:</td><td><input type="text" name="Lname" onKeyUp="checkLName(this.value)" /></td><td><span id='LNMsg'></span></td></tr> 
<tr><td>Email:</td> <td><input type="text" name="email" onKeyUp="checkE(this.value)"/></td><td><span id='EMsg'></span> </td></tr>
<tr><td>Username:</td> <td><input type="text" name="username" onKeyUp="checkUN(this.value)" /></td><td><span id='UNMsg'></td></tr>
<tr><td>Password:</td> <td><input type="password" name="password" onKeyup="checkpass(this.value)"/></td><td><span id='PMsg'></span></td></tr> 
<tr><td>Confirm Password:</td> <td><input type="password" name="Cpassword" /></td></tr>
<tr><td>Phone Number:</td> <td><input type="text" name="phoneNumber" onKeyup="checkP(this.value)"/></td><td><span id='PhMsg'></span></td></tr>
<tr><td><input type="submit" name="register" value="Register" /></td></tr>
</form>

这是JavaScript代码：

<script language='javascript'>
function GetXmlHttpObject() { 
var xmlHttp=null; 
try 
{ 
// Firefox, Opera 8.0+, Safari 
xmlHttp=new XMLHttpRequest(); 
}
catch (e) 
{ 
// Internet Explorer 
try 
{ xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } 
catch (e) 
{ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); }
} 
return xmlHttp; 
}
var xmlHttp, unF=false, nF=false, lF=false, pF=false;

//username checker
function checkUN(str) {
var unExp=/^[a-zA-Z][a-zA-Z0-9]{6,18}$/;       
if (str.length==0){  document.getElementById("UNMsg").innerHTML="";   return;   }

var f1=unExp.test(str);
if(f1)
{
xmlHttp=GetXmlHttpObject(); //use the same function as the previous example
if (xmlHttp==null)  {   alert ("Your browser does not support AJAX!");   return;   } 
//using ajax
var url="registerChecker.php";
url=url+"?username="+str;
url=url+"&sid="+Math.random(); //another way to prevent caching
xmlHttp.onreadystatechange=stateChanged; //not function call
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
else
document.getElementById('UNMsg').innerHTML="Username consists of letters and digits and also it must starts with a letter!";
}
function stateChanged() { 
if (xmlHttp.readyState==4){ 
if (xmlHttp.responseText=="true")
{
unF=false;
document.getElementById("UNMsg").innerHTML="<span style='color:red'>Sorry, this username is already taken</span>";
}
else
{
unF=true;
document.getElementById("UNMsg").innerHTML="<span style='color:green'>This is available</span>";
}
}
}
//first name checker
function checkFName(n){
var nExp=/^[a-zA-Zs]{3,15}$/;
if (nExp.test(n)){
nF=true;
document.getElementById("FNMsg").style.color='green';
document.getElementById("FNMsg").innerHTML='✔';
}
else
{
nF=false;
document.getElementById('FNMsg').style.color='red';
document.getElementById("FNMsg").innerHTML='✘';
}
}
//last name checker
function checkLName(n){
var nExp=/^[a-zA-Zs]{3,15}$/;
if (nExp.test(n)){
lF=true;
document.getElementById("LNMsg").style.color='green';
document.getElementById("LNMsg").innerHTML='✔';
}
else
{
lF=false;
document.getElementById('LNMsg').style.color='red';
document.getElementById("LNMsg").innerHTML='✘';
}
}
//password checker
function checkpass(x){
var exp=/^[a-zA-z0-9._@&]{8,30}$/;
if (exp.test(x)) 
{
document.getElementById("PMsg").innerHTML="<span style='color:green'>Strong</span>";
} 
else
{ 
document.getElementById("PMsg").innerHTML="<span style='color:red'>Weak</span>";
}
}

//email checker
function checkE(s)
{
var emailExp=/^[a-zA-Z0-9._-]+@[a-zA-Z0-9]+.[a-zA-Z.]{2,30}$/; 
if(s.length==0)
{document.getElementById("EMsg").innerHTML="";return;}
f5=emailExp.test(s);
if(f5)
{
document.getElementById("EMsg").style.color='green';
document.getElementById("EMsg").innerHTML='✔'; 
}   
else
{
document.getElementById('EMsg').style.color='red';
document.getElementById("EMsg").innerHTML='✘';
document.getElementById('EMsg').innerHTML = "<span style='color:red'>Should be in proper format</span>";
}   
}
//phone number checker
function checkP(y)
{
var pEx=/^((+|00)973)?[36][0-9]{7}$/;
if(pEx.test(y))
{
pF=true;
document.getElementById("PhMsg").innerHTML="<span style='color:green'>Valid Number</span>";
}
else
{
pF=false;
document.getElementById("PhMsg").innerHTML="<span style='color:red'>Invalid Number, also country code must be inserted </span>";
}
}

function shouldIsubmit()
{
document.forms[0].JSEnabled.value="true";
return (unF && nF && pF && lF && f5 && f1 );
}
</script>

这是PHP检查部分：

[<?php
try{
require('DatabaseLink.php');
extract($_GET);
$sql="select * from users where Username='$username'";
$rs=$db->query($sql);
if ($r=$rs->fetch())
echo "true";
else

echo "false";
$db=NULL;
}
catch(PDOException $e)
{
die($e->getMessage());
}
?>][1]

尽管此用户名存在于数据库中，但还是会显示此消息！ 即使我尝试了新用户名，可用性消息也不会显示 [1]： https://i.stack.imgur.com/whk0z.png

Answer 1

让我帮助你，以便你可以继续构建：

你的函数checkUName()应该是这样的，我已经编辑了一下：

function checkUN(str) {
var unExp=/^[a-zA-Z0-9]{6,18}$/g;       
if (str.length==0){  document.getElementById("UNMsg").innerHTML="";   return;   }

var f1=unExp.test(str);
if(f1)
{
xmlHttp=GetXmlHttpObject(); //use the same function as the previous example
if (xmlHttp==null)  {   alert ("Your browser does not support AJAX!");   return;   } 
//using ajax
var url="registerChecker.php";
url=url+"?username="+str;
url=url+"&sid="+Math.random(); //another way to prevent caching
xmlHttp.onreadystatechange=stateChanged; //not function call
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
else
document.getElementById('UNMsg').innerHTML="Username consists of letters and digits and also it must starts with a letter!";
}

我所做的更改是在正则表达式模式中： 下面的正确模式

var unExp=/^[a-zA-Z0-9]{6,18}$/g;