Changing border color with help of JQuery & Ajax

如果用户名在MySQL中不可用，是否可以在Ajax的帮助下更改Textbox的边框颜色；JQuery与PHP？我在网上搜索了很多，但我得到的只是如何使用Ajax更改div的innerHTML，如果我想显示Tick或Cross图像，这很有用。请帮助

进行如下ajax调用，并将用户名与表单数据一起传递，然后与数据库进行检查。如果无法从数据库中获取用户名，则发送标志"false"作为响应。

$.ajax({
            type: "POST",
            url: "your_url to post",
            data: formdata,
            dataType: 'json',
            success: function (msg) {
                 if(msg=='false')
                     $('#tbxControl').attr('style','border:1px solid #000');
            }
});

查看jQuery文档"如何更改元素的样式"
查看jQuery文档"如何发送ajax请求"
组合1）和2）：在回调函数中发送一个检查用户名的请求元素的改编风格

这很容易。您可以根据ajax响应更改边界；要更改边框，请在jQuery对象上使用css方法。

示例：http://jsfiddle.net/mCk6z/

jQuery(function(){
    $('#username').css({'border': '1px solid #000'});
});

查看本教程。

如果您转到Jquery部分，在第40行之后，您只需要添加：

$('#username').css({border: "1px solid red"});

希望它能有所帮助
干杯

您可以创建一个错误的用户名类

.badUsername{
Border-colour: <colour of your choice>
}

然后在ajax成功或失败函数中，您可以将此类应用于文本框

$(#<TextboxID>).addClass(badUsername);

（您也可以使用removeClass或hasClass对元素执行检查）

另一种选择是直接在成功或失败功能中调整样式

$(#<TextboxID>).css(“border-colour: <colour of your choice>;”);

适用于我的解决方案：）

HTML

<input type="text" name="eMailTxt" id="eMailTxt" class="texttt" placeholder="Email Address" onChange="showUser(this.value)" />

AJAX

function showUser(str)
{
    if (str=="")
    {
        $('#eMailTxt').css({'border':'blue 2px solid'});
    }
    if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                if (xmlhttp.responseText=="false")
                {
                    $("#eMailTxt").css({'border':'red 2px solid'});
                }
                else
                {
                    $("#eMailTxt").css({'border':'green 2px solid'});
                }
            }
        }
    xmlhttp.open("GET","login.php?q="+str,true);
    xmlhttp.send();
}

PHP

<?php
    $q=$_GET["q"];
    $con=mysqli_connect("localhost","root","","my_db");
    $check="SELECT Email FROM persons WHERE EMAIL = '".$q."'";
    $data=mysqli_query($con,$check);
    $result=mysqli_fetch_array($data);
    if ($result[0]==$q)
    {
        echo "true";
    }
    else
    {
        echo "false";
    }
?>