Question

我如何制作一些带有验证的表格，突出显示输入无效或空的字段？

Answer 1

基本思路是：

如果表单已提交，请检查数据
如果没问题，那就使用那个数据
否则，重新显示表单

注意：首先，你做所有这个服务器端：

用户提交表单
将数据发送到服务器
服务器分析该数据
并在必要时重新显示表单

以下是演示基本概念的快速代码部分：

<?php

// By default, no error
$errors = array(
    'field1' => false, 
);

// And all field have empty values
$values = array(
    'field1' => isset($_GET['field1']) ? $_GET['field1'] : "", 
);


if (isset($_GET['submit'])) {
    // The form has been submitted
    // => Check if all data is here

    if (!isset($_GET['field1']) || empty($_GET['field1'])) {
        $errors['field1'] = true;
    }

}


// If there is no error on any field, then :
//      - save the data
//      - redirect to a page that says "data saved"
// Else, continue, and re-display the form


?>
<style type="text/css">
    .error {
        border: 1px solid red;
    }
</style>
<form action="temp.php" method="get">
    <input type="text" name="field1" <?php if ($errors['field1'] == true) {echo 'class="error"';}?> value="<?php echo htmlspecialchars($values['field1'], ENT_COMPAT, 'UTF-8'); ?>" />
    <input type="submit" name="submit" value="Go !" />
</form>

几个笔记：

如果您的表单是用于创建/修改数据，则您将使用POST代替GET （但GET更容易测试） < / LI>
当然，你需要比这更多的HTML：我只发布了一个骨架; - ）
您还需要更多的PHP代码，以保存数据，重定向等等。

当这个解决方案有效时，您可以使用一些Javascript来增强它，进行第一层检查，避免在发生错误时往返服务器。

但是你仍然会在服务器上保留验证：客户端（Javascript）上的验证是为了让你的网站更加用户友好，但JS并不总是启用，表格可以伪造 - 所以你总是需要在服务器上验证数据！

Answer 2

这也可以帮助您：http://flowplayer.org/tools/demos/validator/index.html 或者如果你想在php中这样做:(简单）

<?php
if($_GET["name"] == "name"){
    $returnStyle1 = "background-color: green;";
}else{
    $returnStyle1 = "background-color: red;"; 
}
if($_GET["password"] == "123"){
    $returnStyle2 = "background-color: green;";
}else{
    $returnStyle2 = "background-color: red;"; 
}
?>
<form method='get' action='<?php echo $_SERVER["SCRIPT_NAME"]; ?>'>
   <input type='text' name='name' style='<?php echo $returnStyle1; ?>' value='Username (name)' />
   <input type='password' name='password' style='<?php echo $returnStyle2; ?>' value='password (123)' />
   <input type='submit' value='validate' />

</form>

尝试输入“name”＆amp; “123” - ＆gt;验证

Answer 3

你必须使用ajax。或者，您可以使用javascript验证提交的时间。这是an intro to ajax。

Answer 4

您需要使用jquery在验证后突出显示无效字段。

以下是一些“内联”验证指南的列表：

http://speckyboy.com/2009/12/17/10-useful-jquery-form-validation-techniques-and-tutorials-2/

这个很简单：

http://yensdesign.com/2009/01/how-validate-forms-both-sides-using-php-jquery/

Answer 5

HTML5模式，可能有javascript后备（我收集一些浏览器已经支持:invalid伪类，您可以添加一个真正的类，以便能够使用javascript或生成表单时设置无效状态）。

Answer 6

或者您可以使用旧学校验证。在服务器端，检查字段并将错误1添加到数组中。然后重新构建html页面并验证每个字段：如果它在数组中，则添加一个类“error”。没有ajax，没有javascript。

Answer 7

你需要使用javascript。例如，您有一个文本框输入名称。

<form name="myform" action="abc.php" method="post" onsubmit="validate();">
<input type="text" name="txt1"><div id = "givepost" style="display:none" align="center">*</div>
<input type="submit" name="submit">
</form>
<script type="text/javascript">
function validate()
{
if(document.myform.txt1.value='')
{
document.myform.txt1.focus();
document.getElementById("givepost").style.display="block";
return false;
}
}

如果文本框为空，它将显示*。您可以更改显示错误的方式

验证并突出显示错误

7 个答案: