Question

我有这个html表单，它与MySQL中创建的XAMPP数据库进行交互。我希望以这样的方式验证它：一旦控制前两个框（名称和电子邮件区域）被填充，它就会使用我编写的php脚本将消息发送到数据库。我已经编写了javascript代码来验证表单，但即使前两个字段没有填充它也能正常工作，所以它在某种程度上是错误的。这是文件（html，javascript和php）：

html表单

<html>

<header>

    <script type="text/javascript" src="javascript/validateForm.js"></script>

    <?php include("connectivity.php"); ?>
</header>

<body>

<form name="contactForm" id="contactForm" method="post" action="connectivity.php">
        <div class="form_settings">
            <p><span>Name and Surname</span>
                <input type="text" name="nome" id="nome" />
            </p>
            <p><span>Email</span>
                <input type="text" name="email" id="email" />
            </p>
            <p><span>Message</span>
                <textarea rows="8" cols="50" name="messaggio" id="messaggio"></textarea>
            </p>
            <p style="padding-top: 15px"><span>&nbsp;</span>
                <input class="submit" type="submit" name="invia" value="Invia" onclick="checkForm()" />
            </p>
        </div>
    </form>

</body>
</html>

要验证的javascript文件（以某种方式出错）

function exists(input) {
    atLeastOneChar = false;
    if (input) {
        for (i = 0; i < input.length; i++) {
            if (input.charAt(i) != " ") {
                atLeastOneChar = true;
                break;
            }
        }
    }
    return atLeastOneChar;
}

function checkForm() {
    mes = "";
    if (!exists(document.contactForm.nome.value))
        mes = mes + "Missing name\n";
    if (!exists(document.contactForm.email.value))
        mes = mes + "Missing email\n";
    if (mes != "")
        alert(mes);
    if (mes == "") {
        alert("Ok, correct!\nThe form should now be sent to " +
            "the server!");

    }
}

用于与数据库交互的php文件

<?php


    $db = new PDO('mysql:host=localhost;dbname=myprojectdb;charset=utf8', 
                  'root', 
                  '',
                  array(PDO::ATTR_EMULATE_PREPARES => false,
                  PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));


?>
    <?php

if (isset($_POST['nome'])) {

    $nome = $_POST['nome'];
    $email = $_POST['email'];
    $messaggio =  $_POST['messaggio'];



    $stmt = $db->prepare("INSERT INTO `contatti` (contattoNome,contattoEmail,messaggio)
    VALUES (:nome, :email, :messaggio)");
    $stmt->bindParam(':nome', $nome);
    $stmt->bindParam(':email', $email);
    $stmt->bindParam(':messaggio', $messaggio);

    $stmt->execute();

    echo 'email inviata correttamente';

}

?>

我该如何解决这个问题？

Answer 1

而不是试图让自己的验证工作。使用jQuery Validation插件会更容易：

https://github.com/jzaefferer/jquery-validation

或者我更喜欢：

http://parsleyjs.org/

他们非常直接地实施。

Answer 2

你确定这实际上是在返回正确的结果吗？

!exists(document.contactForm.nome.value)

因为在我看来，＆＃34;值＆＃34;无论是否填充了某些内容，都会存在。你试过了吗？

docuemnt.getElementById("nome").value != '';

此外，您的按钮类型为＆＃34;提交＆＃34;。无论消息如何，它都会提交任何发生的事情。您应该将其更改为＆＃34;按钮＆＃34;。

编辑：为按钮类型添加了代码：

<input class="submit" type="button" name="invia" value="Invia" onclick="checkForm()" />

然后，在您的代码中：

if (mes == "") {
        alert("Ok, correct!\nThe form should now be sent to " +
            "the server!");
        document.getElementById("contactForm").submit();
    }

Answer 3

如果验证失败，Javascript函数应该返回false，你应该在表单中的onsubmit事件中调用js验证函数。替换这两行。

1）要验证的javascript文件 if（mes！=＆＃34;＆＃34;）{ 警报（MES）; return false //在js文件中添加此行 }

如何验证html表单并与php脚本交互

3 个答案: