>我正在尝试更改图像元素的"src"，并在验证并提交表单后将输入元素的属性更改为"只读"。表单的验证发生在 PHP 中，因此我无法附加提交事件处理程序，因为即使表单未通过验证，它也会触发。有没有办法在没有某种插件的情况下做到这一点？
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script>
</head>
<body>
<script>
$(document).ready(function()
{
$("#button_img").click(function ()
{
alert("button clicked");
$("#course_name").css("background-color", "yellow");
$("#course_name").attr("readonly",true);
$("#button_img").attr('src','../images/edit_course.png');
});
});
</script>
<form id='design_course' action="<?php ($_SERVER['PHP_SELF']); ?>" method="post">
<label id="course_name_label">Course Name:</label>
<input type=text id="course_name" name="course_design_name" value="default">
<button id="create_course" type="submit" ><img id="button_img" src="../images/create_course.png"></button>
</form>
</body>
</html>
由于您用于此目的的验证逻辑是服务器端的，因此页面将在重新加载期间更改。 因此，在 HTML 中有条件地设置值的逻辑将是服务器端的。
您可以根据任何if语句有条件地从 PHP 输出到页面。 您没有显示验证逻辑，但为了示例起见，让我们假设如果验证通过，则有一个名为$passedValidation的布尔变量。 然后，您可以在代码中执行以下操作：
<?php if ($passedValidation) { ?>
<img id="button_img" src="../images/something_else.png">
<?php } else { ?>
<img id="button_img" src="../images/create_course.png">
<?php } ?>
因此，请注意，如果表单"通过验证"，则使用的图像是something_else.png而不是create_course.png。 因此，当页面在通过验证逻辑后重新加载时，用户将看到另一个图像。
对于其他 HTML 输出也可以这样做。 如何组织它取决于您，因为对页面上的各种属性重复使用相同的if/else结构可能会变得丑陋。 也许你可以把两个完整的表格包装在一个if/else块或类似的东西中。
另请注意，您需要在首次加载页面且根本没有提交表单时处理$passedValidation的默认false情况。