javascript - 如何同时检查文本框长度并检查重复项

Question

我在尝试解决此问题时遇到问题，我想检查重复项并检查用户名文本框中的长度是否小于或等于 3。两个返回有效后，我启用下一个文本框。

HTML:

<label for="uName" style="margin-left: 8px;">User Name:</label>
<input type="text" id="uName" name="uName" style="margin-left: 7px;" onkeyup="checkEmpty();checkUname();" disabled><br><br>
<label for="pWord1" style="margin-left: 8px;" >Password:</label>
<input type="password" id="pWord1" name="pWord1" style="margin-left: 17px;" onkeyup="checkLength();checkUname();" disabled>

如您所见，我正在使用 2 个按键事件，我知道部分问题，因此下面是这两个事件。

JavaScritp:(此检查用户名是否小于或等于 3)

function checkEmpty() {
    var msg = document.getElementById('msg'),
        uName = document.getElementById('uName'),
        pass1 = document.getElementById("pWord1");

    if ($("#uName").is(':focus')){//TODO combine check uname function with this one
            if (uName.value.length <= 3){
                msg.innerHTML = "User name is too short";
                pass1.disabled = true;
            }else{
                msg.innerHTML = "";
                pass1.disabled = false;
            }
    }

JavaScript:(这部分获取文本框值并从数据库中检查)

function checkUname() {

    var uName = document.getElementById("uName").value,
        pass1 = document.getElementById("pWord1");

    if(window.XMLHttpRequest)
    {
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange=function()
    {
        if(xmlhttp.readyState==4 && xmlhttp.status==200){
            if (xmlhttp.responseText === "1"){
                document.getElementById("msg").innerHTML="Username taken";
            }
        }
    };
    xmlhttp.open("POST","../Functions/matchUname.php?uName="+uName,true);
    xmlhttp.send();
}

PHP:

<?php

include_once("../iConnect/handShake.php");

if (isset($_REQUEST["uName"])){

    $getUname = "SELECT uName FROM userlogin WHERE uName = :uName";
    $getUnameQuery = $dbConnect -> prepare($getUname);
    $getUnameQuery -> bindParam(':uName', $_REQUEST["uName"]);
    $getUnameQuery -> execute();

    if ($row = $getUnameQuery -> fetch(PDO::FETCH_ASSOC)){
        echo "1";
    }else{
        echo "2";
    }

}

我希望我已经表达清楚了，所以如果有人能引导我走向光明，那将是一个很大的帮助。

编辑:下面是我的问题的详细信息。

没有错误，两者都可以工作，问题是我需要将 pass1 文本框置于禁用模式，直到两个函数完成我确实尝试通过 checUname()` 传递 pass1.dissabled = false功能，但一旦我按下按键 pass1 文本框就会启用。

更新:设法让它按照我的预期工作，因此 JavaScript 代码很不错，希望它能在将来帮助其他人。

if ($("#uName").is(':focus')){
 if (uName.value.length <= 3){
   msg.innerHTML = "User name is too short";
   pass1.disabled = true;
 }else{
     if(uName.value.length > 0){
        checkUname();
     }
 }}

function checkUname() {

        if(window.XMLHttpRequest)
        {
            xmlhttp=new XMLHttpRequest();
        }
        else
        {
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.onreadystatechange=function(){

            if(xmlhttp.readyState==4 && xmlhttp.status==200){
                if (xmlhttp.responseText === "1"){
                    msg.innerHTML="Username taken";
                    pass1.disabled = true;
                }else{
                    msg.innerHTML = "";
                    pass1.disabled = false;
                }
            }
        };
        xmlhttp.open("POST","../Functions/matchUname.php?uName="+uName.value,true);
        xmlhttp.send();
    }

Answer 1

这样的东西对你有用吗:

function checkUname(uName) {

if(window.XMLHttpRequest)
{
    xmlhttp=new XMLHttpRequest();
}
else
{
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange=function()
{
    if(xmlhttp.readyState==4 && xmlhttp.status==200){
        if (xmlhttp.responseText === "1"){
            return true;
        } else {
            return false;
        }
    }
};
xmlhttp.open("POST","../Functions/matchUname.php?uName="+uName,true);
xmlhttp.send();
}

然后调用它:

if ($("#uName").is(':focus')){//TODO combine check uname function with this one
        if (uName.value.length <= 3){
            msg.innerHTML = "User name is too short";
            pass1.disabled = true;
        }else{
           if(checkUname(uName.value) {
               msg.innerHTML = "User name already in use";
               pass1.disabled = true;
           } else {
               msg.innerHTML = "";
               pass1.disabled = false;
           }
        }
}