显示不同的充边框的颜色是否为合法(Displaying differnt border color

所以，我有我的形式，我提供的图片下方。左边的图片是正常的边框颜色，但随后在右边的红色轮廓是当表单输入无效。

我将如何通过PHP这样做呢？下面是相应的代码

<?php
try {
    $handler = new PDO('mysql:host=localhost;dbname=s','root', '*');
    $handler->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
}
catch (PDOException $e){
    exit($e->getMessage());
}

// Post
$name = $_POST['name']; 
$username = $_POST['username']; 
$email = $_POST['email'];   
$password = $_POST['password']; 
$password1 = $_POST['passwordconf'];
$ip = $_SERVER['REMOTE_ADDR'];

// Verifcation 
if (empty($name) || empty($username) || empty($email) || empty($password) || empty($password1)) {
    echo "Complete all fields";
}

// Password match
if ($password != $password1) {
    echo $passmatch = "Passwords don't match";
}

// Email validation
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
    echo $emailvalid = "Enter a  valid email";
}

// Password length
if (strlen($password) <= 6){
    echo $passlength = "Choose a password longer then 6 character";
}

if(empty($passmatch) && empty($emailvalid) && empty($passlength)) { 
//Securly insert into database
$sql = 'INSERT INTO userinfo (name ,username, email, password, ip) VALUES (:name,:username,:email,:password,:ip)';

$query = $handler->prepare($sql);
$query->execute(array(
    ':name' => $name,
    ':username' => $username,
    ':email' => $email,
    ':password' => $password,
    ':ip' => $ip

 ));
}
?>

而我的HTML表单

<!DOCTYPE html>
<html lang="en">        
<body>
<div class="container">
    <form class="form-signin" role="form" action="register.php" method="post">
        <h2 class="form-signin-heading">Please sign up</h2>
        <input type="text" class="form-control" placeholder="Name"  name="name" autofocus style="border-color:#<?php   ?>;">
        <input type="text" class="form-control" placeholder="Username"  name="username" autofocus>
        <input type="text" class="form-control" placeholder="Email"  name="email" autofocus>
        <input type="password" class="form-control" placeholder="Password" name="password">
        <input type="password" class="form-control" placeholder="Password, Again" name="passwordconf" >
        <button class="btn btn-lg btn-primary btn-block" type="submit">Sign up</button>
    </form> 
</div>
</body>
</html>

因此，如果输入满足if语句我怎么会显示颜色？

Answer 1:

当你的表格有错误，你需要重新显示。这很难给出一个建议，不知道你的代码结构，但我会假设你的HTML通过PHP的呼叫呈现。一般情况下，我做了什么样

$error = false
//this $_GET['submit'] variable could be part of the URL of your submitted form.
//alternately, you could check the HTTP method of the page request
if ($_GET['submit']) {
    //run your form logic
    //if you have success, run your php query and then redirect
    //to your "success" page using a 302 (using a header("Location:... sort of call)
    //you would also want to call die() or something right here
}
//if you make it this far, display your page including the bits about errors
//your form's action goes right back to the same page that rendered it, but with
//some change to the url to let the script know that you want to process the form

随着PHP5，并与有关未定义变量警告开启，你将需要检查的形式是否被提交之前定义所有的错误信息变量。

Asuming您使用Twitter的引导，因为你有form-control所有的地方，（假定> = 3.0.0），则可以使用（对于事物的图形侧） has-suceess ， has-error等像如下所示： http://getbootstrap.com/css/#forms-control-validation 。

当您重新显示窗体由于恶劣的数据，一起到任何使你的HTML你的错误消息传递。用你的东西将是一个例子（假设你的形式访问$passmatch ， $emailvalid ， $passlength ）：

<!DOCTYPE html>
<html lang="en">        
  <body>

    <div class="container">

      <form class="form-signin" role="form" action="register.php" method="post">
        <h2 class="form-signin-heading">Please sign up</h2>
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Name"  name="name" autofocus style="border-color:#<?php   ?>;">
        </div>
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Username"  name="username" autofocus>
        </div>
        <div class="form-group <?php if (!empty($emailvalid)) { echo 'has-error'; } ?>">
          <input type="text" class="form-control" placeholder="Email"  name="email" autofocus>
        </div>
        <div class="form-group <?php if (!empty($passmatch) || !empty($passlength)) { echo 'has-error'; } ?>">
          <input type="password" class="form-control" placeholder="Password" name="password">
        </div>
        <div class="form-group <?php if (!empty($passmatch)) { echo 'has-error'; } ?>">
          <input type="password" class="form-control" placeholder="Password, Again" name="passwordconf" >
        </div>
        <button class="btn btn-lg btn-primary btn-block" type="submit">Sign up</button>
      </form>
    </div> 
  </body>
</html>

我会建议使用模板引擎或东西从实际代码视图分离。

至于帮助文本，你可以用错误的元素后，使用这样的：

<div class="form-group <?php if (!empty($yourVariable)) { echo 'has-error'; }?>">
    <input type="text" class="form-control" />
    <span class="help-block"><?php echo $yourVariable; ?></span>
</div>

有趣的部分是，如果你没有错误信息，帮助块甚至不会显示，因为该变量不会有任何东西。

编辑

示例页面： http://content.kevincuzner.com/register.php

实例源： https://gist.github.com/kcuzner/11323907

Answer 2:

我会处理这与JavaScript的客户端。在提交表单，你可以检查输入是否有效与否，然后只更新使用JavaScript边框颜色。

在<?php ?>你可以在上面填写（如果你想要走这条路线）可以只依赖于某些变量检查有效性：

echo "Complete all fields";
$fieldsValid = false;

border-color: <?php $fieldsValid ? 'blue' : 'red' ?>

但是，你需要做的这个工作重新加载整个页面。 JavaScript是一种更好的途径：

document.forms[0].addEventListener("submit", function () {
    var usernameInput = document.querySelector("[name=username]");
    if (!usernameInput.value) {
        usernameInput.style.borderColor = "red";
    }
});

文章来源: Displaying differnt border color if field is valid