0

我正在为我的网站准备一个注册表单。我可以检查用户输入的用户名是否已经存在。但是如果没有使用这样的名称，我想将我提供的用户名图标的颜色更改为绿色，如果已经存在，则更改为绿色。我怎样才能做到这一点？

类似于本网站https://www.hackerrank.com/signup中发生的情况

PS。我是新手。做详细解释。如果可能的话，即使有一些示例代码。

编辑：

这是我使用过的代码

<?php
                 // Ajax calls this code to CHECK the username to execute
if(isset($_POST["usernamecheck"])){
include_once("db_conx.php");
$username = preg_replace('#[^a-z0-9]#i', '', $_POST['usernamecheck']);
$sql = "SELECT id FROM users WHERE username='$username' LIMIT 1";
$query = mysql_query($vaffle); 
$uname_check = $query -> num_rows;
if (strlen($username) < 3 || strlen($username) > 16) {
    echo '<strong style="color:#F00;">3 - 16 characters only</strong>';
    exit();
}
if (is_numeric($username[0])) {
    echo '<strong style="color:#F00;">Usernames must begin with a letter</strong>';
    exit();
}

if ($uname_check < 1) {
    echo '<strong style="color:#009900;">' . $username . ' is OK</strong>';
    exit();
} else {
    echo '<strong style="color:#F00;">' . $username . ' is taken</strong>';
    exit();
}
}
?>

表格代码：

<div class="formgroup">
            <i class="icon-user"></i>
        <input id="username" type="text" name="username" value="" placeholder="Choose an Username" data-content="" data-toggle="tooltip" data-placement="right" onblur="checkusername()" onkeyup="restrict('username')" maxlength="16">
        <span id="unamestatus"></span>
    </div>
    <div class="formgroup">
            <i class="icon-mail"></i>
        <input id="email" type="text" name="mail" value="" placeholder="Your Email Id" data-content="" data-toggle="tooltip" data-placement="right" onfocus="emptyElement('status')" onkeyup="restrict('email')" maxlength="88">
    </div>
    <div class="formgroup">
            <i class="icon-lock"></i>
        <input id="pass1" type="password" name="password" placeholder="Choose a password" data-content="" data-toggle="tooltip" data-placement="right" onfocus="emptyElement('status')" maxlength="16">
    </div>

    <div class="formgroup">
            <i class="icon-lock"></i>
        <input id="pass2" type="password" name="password" placeholder="Confirm Password" data-content="" data-toggle="tooltip" data-placement="right" onfocus="emptyElement('status')" maxlength="16">
    </div>

我可以修改此代码以获得我想要的输出吗？

4

1 回答 1

0

您的第一步是验证该字段是否为空白（并且，有效），不幸的是，您需要使用 javascript 来完成此部分。要更改图标/标签，我建议您在确定该字段不为空后使用 javascript 添加“有效”类来应用这些更改。

您没有向我们展示您当前的代码，但是如果您有一个简单的表格，例如

<label for="username"> <i class="icon-user" alt="Username"></i> </label>
<input id="username" type="text">

它使用一个图标作为标签，你的 css 可能看起来像

label .icon-user:before {
  color: gray;
  content: "u"; // ... or whatever the corresponding symbol
  font-family: 'icomoon'; // assuming you're using an icon font      
} 

label.valid .icon-user:before {
  color: green;
}

当用户移动到下一个字段时，您的 javascript 会检查前面的字段是否有效，如果有效，则将“有效”类添加到标签中。您甚至可以创建一个图标为红色的无效类。当然，如果您使用的是精灵或图形，您只需为 .valid 类换入适当的样式。

这有帮助吗？

于 2013-07-28T16:14:14.610 回答