Question

我正在尝试使用javascript验证来获取简单的登录表单。现在我只关注用户名输入（希望它显示为红色，并在其下面显示错误“如果用户名已被占用，则已使用该用户名”）。但是，当输入发生变化时，即使我检查了元素网络，我看到它已经转到registerjs.php文件，也没有显示任何内容

在html表单页面的头部我有

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
    function valusername() {
    var username = $('input#username').val();
    if ($.trim(username) != '') {
        $.post('../ajax/registerjs.php', {username: username}, function(data) {
        if (data == 'That username is already taken') {

        document.getElementById("username").style.border="3px solid red";
        $('div#username_error').text(data);
    }

    });
    }
}

</script>

实际的文字输入是

<input class="input" type="text" tabindex="1" placeholder="Username*" 
style="height:20px;" name="username" id="username" onchange="valusername()">
<div id="username_error"></div>

链接的php文件registerjs.php我肯定有效

<?php
include('../init.php');
if (isset($_POST['username']) === true && empty($_POST['username']) === false) {
$username = $_POST['username'];
if (user_exists($username) === true) {
echo("
    That username is already taken
    ");
} else {
echo("Good");
}
}
?>

有谁知道为什么我遇到这个问题？它似乎是脚本中的if语句。

Answer 1

这样做：

function valusername() 
{
    var username = $('input#username').val();
    if ($.trim(username) != '') 
    {
        $.post('../ajax/registerjs.php', {username: username}, function(data) 
        {
            if ($.trim(data) == 'That username is already taken') 
            {
                document.getElementById("username").style.border="3px solid red";
                $('div#username_error').text(data);
            }
        });
    }
}

Answer 2

更好的方法：

<input class="input" type="text" tabindex="1" placeholder="Username*" 
style="height:20px;" name="username" id="username" >
<div id="username_error"></div>

JS

<script>
    $(function(){
    $(document).on('change paste','#username', function () {
        var username = $(this).val();
        if ($.trim(username) !== '') {
            $.post('../ajax/registerjs.php', {username: username},
                function(data){
                    if (data) {
                        $("#username").css({'border','3px solid red'});
                        $('div#username_error').text('Username already exist');
                        return false;
                    }
                }
            ); // end of $.post
        } // end of if
    })
})
</script>

registerjs.php

<?php
include('../init.php');
// here i assume user_exists return true or false
if ( !empty($_POST['username']) && user_exists($username)) {
 return TRUE;
} 
else{
  return FALSE;
}
?>

Javascript验证if语句

2 个答案:

JS

registerjs.php