如果字段有效，则显示不同的边框颜色
Posted
技术标签:
【中文标题】如果字段有效，则显示不同的边框颜色【英文标题】：Displaying differnt border color if field is valid 【发布时间】：2014-06-12 07:46:28 【问题描述】：所以我有我的表格，我在下面提供了图片。左边的图片是正常的边框颜色，但是右边的红色轮廓是表单输入无效的时候。
我将如何通过 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 语句，我将如何显示颜色？
【问题讨论】：
你在使用 Bootstrap 吗？对于您正在使用的类，似乎是这样：getbootstrap.com/css/#forms-control-validation您必须将相应的类添加到输入中。 是的，我正在使用引导程序 @azeós 您可以使用 Flash 会话并指定一个错误类，然后如果设置了该 Flash 会话错误，则在特定字段上回显它。 Making textbox color red when error occurs in a form的可能重复 我不会说它是重复的，因为每个人的代码都不同@DanMan 【参考方案1】：当您的表单出现错误时，您需要重新显示它。在不了解您的代码结构的情况下很难给出建议，但我会假设您的 HTML 是通过调用 php.ini 来呈现的。一般来说，我做过类似的事情
$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 bootstrap，因为您到处都有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
【讨论】：
您的 HTML 是静态页面还是由 PHP 创建的？如果它不是由 PHP 创建的，我的 HTML 将无法工作，因为它与 HTML 混合了 PHP 内容。 它只是一个简单的注册表单，但它是一个 PHP 文件。 我在回答中试图传达的是，我会将您的注册表单和您的register.php 合并到同一个 php 文件中。这样，在您提交表单之前，它会呈现 php.ini 文件。提交后，相同的脚本再次运行并尝试创建用户。如果成功，它会重定向到某个成功页面。如果失败，它会再次显示相同的表单。
我没有测试我的 HTML，所以当您尝试加载它时是否有任何错误？很可能是我犯了语法错误之类的。
好的，我的语法错误已修复（我有几个尾随 )）。它至少现在应该加载。【参考方案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";
);
【讨论】：
那么客户端和服务器端？以及在 my 代码中的外观如何？我是 JS 的新手，我需要我能得到的所有帮助！ 将样式直接放入 HTML 是不好的做法。在无效字段上设置一个 CSS 类，如error，然后将样式放入样式表中。以上是关于如果字段有效，则显示不同的边框颜色的主要内容，如果未能解决你的问题，请参考以下文章
如何使整个表单（输入和提交按钮）在焦点上更改边框颜色（引导程序 3）