Question

在过去的几年里，我专注于后端开发，所以我的javascript＆amp;缺乏css技能。我是一名站点的网站管理员，并希望对表单进行验证（目前没有）。
我的问题：基本上我有一个表单，其中包含一些名称字段，一个电子邮件地址和一个电话号码。提交表单后，我验证所有字段。如果数据无效，我想将该字段的标签颜色更改为红色（类似于struts验证）。最简单的方法是什么？

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

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

Answer 2

假设标签与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>

如您所见，所有输入前面都有一个带有正确属性的标签。

现在是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>

编辑 - 我想你不想要这种解决方案，但是如果你想在去服务器之前验证它，你就去了。：）

Answer 3

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

如果可以，最好同时拥有两者。

Answer 4

你可以像其他人所说的那样把它放在一起。但我似乎记得Struts有自己的JavaScript验证。它可以配置为生成JavaScript函数，这些函数执行与服务器端相同的检查。查看documentation - 这可能是一种快速入门方式，但可能无法根据您的需要进行自定义。

Answer 5

我之前绝对没有使用struts，但是我使用和不使用javascript进行了大量的表单验证。

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

服务器端，您应该执行类似glaziusf.myopenid.com之类的操作，只需在显示红色的元素中添加一个类。

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

Answer 6

我建议你学习像JQuery或Prototype这样的JavaScript框架。 JQuery可以帮助您从过滤元素中获取值，修改CSS，添加视觉效果等等。

我并不真正了解您网站的PHP逻辑，但如果操作提交给自己，您可以在同一页面中进行验证，但我不知道这是不是一个好习惯。例如，您将以下内容放在顶部：

if( $_SERVER['REQUEST_METHOD'] == 'POST' ){
//field validation code...

要使用PHP重定向，您只需说：

header("Location: THE_PAGE.php");

虽然在此之前你不应该输出任何东西。您可以将参数传递回您的页面（即：THE_PAGE.php？valMsg = 1），告诉它显示验证消息，或类似的东西。

如何使用javascript / html / css模仿struts验证

6 个答案: