Question

我正在为我的网站准备一份注册表格。我能够检查用户输入的用户名是否已经存在。但是如果没有这样的名字，我想改变我给绿色的用户名图标的颜色，如果已经存在则改为绿色。我怎样才能做到这一点？

与本网站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>

我是否可以修改此代码以获得所需的输出？

Answer 1

您的第一步是验证该字段不是空白（并且，有效），不幸的是您需要使用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”类添加到标签中。您甚至可以创建一个图标为红色的无效类。当然，如果你使用精灵或图形，你只需交换.valid类的相应样式。

这有帮助吗？

在条件上更改图标的颜色

1 个答案: