Php 如何使用javascript/html/css模拟struts验证
在过去的几年里，我一直专注于后端开发，因此我缺乏javascript和css技能。我是一个网站的网站管理员，我想整理一下表单验证（目前没有）。Php 如何使用javascript/html/css模拟struts验证,php,javascript,html,css,struts,Php,Javascript,Html,Css,Struts,在过去的几年里，我一直专注于后端开发，因此我缺乏javascript和css技能。我是一个网站的网站管理员，我想整理一下表单验证（目前没有）。 我的问题是： 基本上，我有一个表单，其中有几个姓名字段、一个电子邮件地址和一个电话号码。提交表单时，我验证所有字段。如果数据无效，我想将该字段的标签颜色更改为红色（类似于struts验证）。最简单的方法是什么 编辑：我还有后端PHP验证。我希望它在前端更漂亮、更人性化。PHP验证位于不同的服务器上。如果后端验证失败，它将显示一条消息，用户将被迫使用“后退
我的问题是： 基本上，我有一个表单，其中有几个姓名字段、一个电子邮件地址和一个电话号码。提交表单时，我验证所有字段。如果数据无效，我想将该字段的标签颜色更改为红色（类似于struts验证）。最简单的方法是什么
编辑：我还有后端PHP验证。我希望它在前端更漂亮、更人性化。PHP验证位于不同的服务器上。如果后端验证失败，它将显示一条消息，用户将被迫使用“后退”按钮。我希望重新指向原始页面并显示无效字段。服务器端正在进行Struts验证；JavaScript验证在客户端上运行。区别很重要，因为即使您的客户端关闭浏览器中的JavaScript，服务器端验证仍然有效（据报道约有10%的用户关闭了JavaScript）
如果可以，最好同时使用这两个字段。在构建页面服务器端时，请标记所有字段中的错误：
<input type="text" name="phone_number" class="error_field">
555-121
</input>
如果您想知道Struts生成了什么样的代码来给页面上色，一个简单的方法是使用Firefox扩展。假设标签与输入位于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>
姓名：
电邮：
<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>
函数验证（）{
//所以我们有一个验证函数。
//让我们首先获取输入。
名称=document.getElementById（“名称”）；
email=document.getElementById（“电子邮件”）；
//如果存在验证错误，变量错误将增加。
//这样，如果发现错误，表单将不会提交。
误差=0；
//现在进行验证。
如果（name.value.length<6）{
//我们发现一个错误，所以增加变量
错误++；
//现在找到相应的标签。
nameLabel=name.previousSibling；
//如果我们找到了标签，请向其添加错误类。
if（namelab&&namelab.for=name.id）{
namelab.className=“错误”；
}
}
///////////////////
//对电子邮件做同样的处理。。。
///////////////////
//现在，如果没有错误，让表单提交。
//如果有错误，请阻止它这样做。
返回值（错误==0）？真：假；
}
<style type="text/css">
.error {
background-color: red;
}
</style>
.错误{
背景色：红色；
}
编辑--我猜您不希望使用这种解决方案，但如果您希望在进入服务器之前对其进行验证，请点击这里。：） 正如其他人所建议的那样，你可以自己把这些放在一起。但我似乎记得Struts有自己的JavaScript验证。可以将其配置为生成JavaScript函数，这些函数执行与服务器端相同的检查。检查--这可能是一种快速入门的方法，尽管它可能没有您想要的那样可定制。我以前肯定没有使用过struts，但我在使用和不使用javascript的情况下都会进行大量表单验证 在我看来，您应该始终同时拥有javascript和服务器端验证，因此它应该适用于所有人 在服务器端，您应该执行前面提到的操作，只需向元素添加一个以红色显示的类
在javascript（和ajax）中，只需向服务器端使用的元素添加相同的类，但要动态添加。我建议您学习像JQuery或Prototype这样的javascript框架。JQuery可以帮助您从过滤后的元素中获取值，修改它们的CSS，添加视觉效果，等等 我真的不理解你网站的PHP逻辑，但是如果操作提交给它自己，你可以在同一个页面中进行验证，尽管我不知道这是否是一个好的实践。 例如，将以下内容放在顶部：
if( $_SERVER['REQUEST_METHOD'] == 'POST' ){
//field validation code...
header("Location: THE_PAGE.php");
虽然在此之前你不应该输出任何东西。您可能会将一个参数传递回页面（即：THE_page.php？valMsg=1），告诉它显示验证消息或类似的内容。谢谢您的评论。后端验证已经得到处理，但我希望使前端更加用户友好。我已经编辑了我的问题。
header("Location: THE_PAGE.php");