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

时间:2017-04-25 09:25:56

标签: javascript php jquery

我有一个问题试图弄清楚我想检查重复项并检查我的用户名文本框中的长度是否小于或等于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文本框处于禁用模式,直到两个函数完成我尝试传递pass1.dissabled = false through the checUname()`功能但是只要我按下一个键,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();
    }

1 个答案:

答案 0 :(得分: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;
           }
        }
}