在过去的几年中，我一直专注于后端开发，因此缺乏 javascript 和 css 技能。我自愿担任网站管理员，并希望完善表单验证（目前没有）。
我的问题：
基本上我有一个表格，其中包含几个姓名字段、一个电子邮件地址和一个电话号码。提交表单后，我会验证所有字段。如果数据无效，我想将该字段的标签颜色更改为红色（类似于 struts 验证）。最简单的方法是什么？
编辑：我也有后端 PHP 验证。我希望在前端让它更漂亮、更用户友好。 PHP 验证位于不同的服务器上。如果后端验证失败，它会显示一条消息，并强制用户使用“后退”按钮。我希望重定向回原始页面并显示无效字段。
【问题讨论】：
标签： php javascript html css struts
当您在服务器端构建页面时，标记所有包含错误的字段：
<input type="text" name="phone_number" class="error_field">
555-121
</input>
然后在页面的 CSS 中包含如下条目：
input.error_field { color: #FFF; bgcolor: #C00; }
（句点是“类选择器”，意味着它适用于具有类属性“error_field”的所有输入。如果您已经为输入标签使用类，则可以为元素提供多个类，只需使用空格分隔即可。 )
如果您想知道 Struts 生成什么样的代码来为页面着色，一种简单的方法是使用 Firefox 的 Firebug 扩展。
【讨论】：
假设标签与输入位于 DOM 层次结构的同一级别，并且在标记中紧邻输入，您可以执行以下操作。
首先，一些示例 HTML：
<html>
<body>
<form onsubmit="return validation()" action="submit.php" method="post">
<label for="name">Name:</label>
<input type="text" value="" id="name" />
<label for="email">Email:</label>
<input type="text" value="" id="email" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
如您所见，所有输入前面都有一个带有正确 for 属性的标签。
现在是 Javascript，它将进入头脑：
<script type="text/javascript">
function validation() {
//So we have a validation function.
//Let's first fetch the inputs.
name = document.getElementById("name");
email = document.getElementById("email");
//The variable error will increment if there is a validation error.
//This way, the form will not submit if an error is found.
error = 0;
//Now for validation.
if(name.value.length < 6) {
//We've found an error, so increment the variable
error++;
//Now find the corresponding label.
nameLabel = name.previousSibling;
//If we found the label, add an error class to it.
if(nameLabel && nameLabel.for = name.id) {
nameLabel.className = "error";
}
}
///////////////////
//Do the same with the email...
///////////////////
//Now, if there are no errors, let the form submit.
//If there are errors, prevent it from doing so.
return (error == 0) ? true : false;
}
</script>
现在只需添加一些 CSS：
<style type="text/css">
.error {
background-color: red;
}
</style>
编辑——我猜你不想要这种解决方案，但如果你希望它在进入服务器之前进行验证，那么你就去吧。 :)
【讨论】：
Struts 验证发生在服务器端； JavaScript 验证在客户端上运行。区别很重要，因为即使您的客户端在浏览器中关闭 JavaScript（据报道约有 10% 的人这样做），服务器端验证仍然有效。
如果可以，最好两者兼得。
【讨论】：
您可以按照其他人的建议自行组装。但我似乎记得 Struts 有自己的 JavaScript 验证。它可以配置为生成 JavaScript 函数，这些函数执行与服务器端相同的检查。检查documentation——这可能是一种快速入门的方法，尽管它可能无法像您想要的那样可定制。
【讨论】：
我之前肯定没有使用过 struts，但是我做了很多使用和不使用 javascript 的表单验证。
在我看来，您应该始终同时拥有 javascript 和服务器端验证，因此它应该适用于所有人。
服务器端，你应该做类似glaziusf.myopenid.com提到的事情，只需将一个类添加到以红色显示的元素。
在 javascript（和 ajax）中，只需将相同的类添加到您将在服务器端使用的元素中，但要动态添加。
【讨论】：
我建议您学习 JavaScript 框架，例如 JQuery 或 Prototype。 JQuery 可以帮助您非常轻松地从过滤元素中获取值、修改其 CSS、添加视觉效果等。
我不太了解您网站的 PHP 逻辑，但是如果操作提交给自身，您可以在同一页面中进行验证，尽管我不知道这是否是一个好习惯。 例如，您将以下内容放在顶部：
if( $_SERVER['REQUEST_METHOD'] == 'POST' ){
//field validation code...
要使用 PHP 重定向，您只需说：
header("Location: THE_PAGE.php");
虽然你不应该在那之前输出任何东西。您可能可以将一个参数传回您的页面（即：THE_PAGE.php?valMsg=1）来告诉它显示验证消息或类似的东西。
【讨论】：