Javascript 出现错误时，将输入字段更改为其他颜色

我已经使用bootstrap设置了一个php登录页面。当输入字段为空、电子邮件无效或用户名已在使用时，我想将输入字段更改为红色。当前，当用户单击“注册”时，会打开包含这些消息的新页面

如何将输入字段更改为红色并在输入字段中显示消息

以下是我的PHP代码：

require("config.php");
if(!empty($_POST)) 
{ 
    // Ensure that the user fills out fields 
    if(empty($_POST['username'])) 
    { die("Please enter a username."); }
    if(!filter_var($_POST['username'], FILTER_VALIDATE_EMAIL)) 
    { die("Invalid E-Mail Address"); }  
    if(empty($_POST['password'])) 
    { die("Please enter a password."); } 

    // Check if the username is already taken
    $query = " 
        SELECT 
            1 
        FROM users 
        WHERE 
            username = :username 
    "; 
    $query_params = array( ':username' => $_POST['username'] ); 
    try { 
        $stmt = $db->prepare($query); 
        $result = $stmt->execute($query_params); 
    } 
    catch(PDOException $ex){ die("Failed to run query: " . $ex->getMessage()); } 
    $row = $stmt->fetch(); 
    if($row){ die("This email address is already registered"); }

以下是HTML代码：

<div class="container hero-unit">        
<div class="row" style="margin-top:20px">
    <div class="col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3">
        <form action="register.php" method="post" role="form">
            <fieldset>
                <h2>Please Register</h2>
                <hr class="colorgraph">
                <div class="row">
                    <div class="col-xs-6 col-sm-6 col-md-6">
                        <a href="#" class="btn btn-lg btn-facebook btn-block"><i class="fa fa-facebook"></i> &nbsp;Sign in with Facebook</a>
                    </div>
                    <div class="col-xs-6 col-sm-6 col-md-6">
                        <a href="#" class="btn btn-lg btn-info btn-block"><i class="fa fa-twitter"></i> &nbsp;Sign in with Twiter</a>
                    </div>
                </div>
                <div class="login-or">
                    <hr class="hr-or">
                    <span class="span-or">or</span>
                </div>
                <div class="form-group">
                    <input type="email" name="username" id="email" class="form-control input-lg" placeholder="Email Address" value="<?php echo $submitted_username; ?>">
                </div>
                <div class="form-group">
                    <input type="password" name="password" id="password" class="form-control input-lg" placeholder="Password">
                </div>
                <hr class="colorgraph">
                <div class="row">
                    <div class="col-xs-6 col-sm-6 col-md-6">
                        <input type="submit" class="btn btn-lg btn-primary btn-block" value="Register" /> 

                    </div>
                    <div class="col-xs-6 col-sm-6 col-md-6">
                        <a href="index.php" class="btn btn-lg btn-info btn-block">Sign In</a>
                    </div>
                </div>
            </fieldset>
        </form>
    </div>
</div>

请登记


或
看一看
您需要在表单上调用validate方法

<script>
$("#formId").validate();
</script>


$（“#formId”）.validate（）；
好吧，完整的解决方案将是相当长的，而且基于我们目前所知的更多。如果我理解你的意思是正确的，那么应该在提交表单时（离开页面之前）进行检查。这需要AJAX

基于上面用于验证的php脚本，我假设如果验证中出现错误，它将只回显任何内容。基于这个假设，你可以做这样的事情

首先，让我们从表单开始。
将onsubmit侦听器添加到表单标记：


其次，添加一个javascript函数来处理AJAX请求：


函数validate_data（）
{
signupRequest=$.ajax({
url:“path/to/your/php/validation/page”，
类型：“post”，
数据：{‘用户名’：$（‘电子邮件’）.val（），‘密码’：$（‘密码’）.val（）}
})
.完成（功能）{
如果（s==“”）{
//验证看起来正常，登录创建的用户，使用例如top.location.href继续，或执行任何您想要的操作…：）
}否则{
var el=$（'电子邮件'）；
$（el）.addClass（'has_error'）；
$（el）.val（s）；
})
.故障（功能（obj，s）{
警报（“错误：+s”）；
});
//确保表单未提交（我们希望停留在此页面）
返回false；
}

这是临时写出来的，所以可能会有一些打字错误，但希望你能理解…；）
我通过使用我在这里找到的插件修复了我的问题：
这是最好的方法还是我可以修改PHP代码？因为你需要检查用户名数据库，你需要查询你的服务器。如果你不想更改页面，你需要通过AJAX来完成。基本上，对你的PHP进行后台调用，并且在得到肯定的响应之前不允许提交表单从您的服务器。如果您还没有做过任何AJAX，我建议您阅读一些教程。title是包含关于输入的建议文本的输入属性，invalid是针对有问题的输入的CSS psudeo类。您还应该根据需要使用和需要attribs。密码可以使用regexp来定义有效性把它放在输入的模式attrib中只是一个注释，但是你不能使用
die
，除非你想杀死整个php页面。那么我应该从代码中删除die吗？不确定我应该在这里做什么。我应该使用javascipt吗？如果是这样，会影响php检查吗？哦，是的，你也可以添加一个纯javascript验证，比如dss suggeste但是，您永远不应该完全信任javascript验证，因为它们很容易被恶意用户操纵。在实际插入/更新数据库中的数据之前，始终在服务器端运行二次验证。通过使用AJAX调用php验证而不是jQuerys内置验证，您可以重用相同的valida当你想处理数据（在服务器端）时，为服务器端编写一个脚本。我已经尝试了很多不同的JavaScript解决方案，它继续打开一个带有PHP错误的新页面。