0

在过去的几年中，我一直专注于后端开发，因此缺乏 javascript 和 css 技能。我自愿担任一个网站的网站管理员，并希望完善表单验证（目前没有）。
我的问题：基本上我有一个包含几个姓名字段、一个电子邮件地址和一个电话号码的表格。提交表单后，我会验证所有字段。如果数据无效，我想将该字段的标签颜色更改为红色（类似于 struts 验证）。最简单的方法是什么？

编辑：我也有后端 PHP 验证。我希望在前端让它更漂亮、更用户友好。PHP 验证位于不同的服务器上。如果后端验证失败，它会显示一条消息，并强制用户使用“后退”按钮。我希望重新定向回原始页面并显示无效字段。

4

6 回答 6

1

当您构建页面服务器端时，请标记所有包含错误的字段：

<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扩展。

于 2008-12-31T17:27:17.017 回答
1

假设标签与输入位于 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>

编辑——我猜你不想要这种解决方案，但如果你想让它在去服务器之前验证，你就去吧。:)

于 2008-12-31T17:34:55.927 回答
0

正如其他人所建议的那样，您可以自己将其组合在一起。但我似乎记得 Struts 有自己的 JavaScript 验证。它可以配置为生成 JavaScript 函数，这些函数执行与服务器端相同的检查。检查文档——这可能是一种快速入门的方法，尽管它可能不像您想要的那样可定制。

于 2008-12-31T17:43:49.917 回答
0

Struts 验证发生在服务器端；JavaScript 验证在客户端上运行。区别很重要，因为即使您的客户端关闭浏览器中的 JavaScript（据报道约有 10% 的人这样做），服务器端验证仍然有效。

如果可以的话，最好两者兼得。

于 2008-12-31T16:54:24.213 回答
0

我建议你学习一个 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）以告诉它显示验证消息或类似的东西。

于 2009-01-13T17:47:00.993 回答
0

我以前绝对没有使用过 struts，但是我在使用和不使用 javascript 的情况下进行了很多表单验证。

在我看来，您应该始终同时拥有 javascript 和服务器端验证，因此它应该适用于所有人。

在服务器端，您应该执行上述glaziusf.myopenid.com 之类的操作，只需将一个类添加到以红色显示的元素即可。

在 javascript（和 ajax）中，只需将相同的类添加到您将在服务器端使用的元素中，但是是动态的。

于 2008-12-31T18:18:55.493 回答