Question

所以我有我的表格，我提供了下面的图片。左侧图片是普通边框颜色，但右侧的红色轮廓是表单输入无效时。

enter image description here

我如何通过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并打开有关未定义变量的警告，您需要在检查表单是否正在提交之前定义所有错误消息变量。

假设您使用的是Twitter引导程序，因为您到处都有form-control（假设＆gt; = 3.0.0），您可以使用（对于图形方面）has-suceess，{ {1}}等，如下所示：http://getbootstrap.com/css/#forms-control-validation。

当您因数据错误而重新显示表单时，请将错误消息传递给呈现您的HTML的任何内容。举例来说（假设您的表单可以访问has-error，$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>

有趣的是，如果您没有错误消息，则甚至不会显示帮助块，因为该变量中没有任何内容。

修改

示例页面：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";
    }
});

如果字段有效，则显示不同的边框颜色

2 个答案: