Question

我有一种唠叨的感觉，但是我不确定如何正确地说出来，所以无论如何我都会问。

我正在编写一个简单的计算器脚本（用于学习，我是新手），我将其分为两部分 - 使用JS进行前端表单验证和使用PHP进行计算。

更具体地说，这里有三个部分：

HTML （index.php）

<form action = "calculator.php" method = "post">

第一个数字：输入字段

接线员：下拉

第二个数字：输入字段

提交按钮

</form>

JavaScript （validate.js）

validate（） - 正则表达式检查第一个和第二个数字是否为全部数字

PHP （calculator.php）

提取第一个和第二个数字，计算结果，并在页面上显示

这是我的问题 - 我想这样做，当按下提交按钮时，只有传递所有正则表达式测试，页面才会传递给服务器。

类似的东西：

validate() {
    // testing code
    ...
    if first_num_valid == true && second_num_valid == true
        redirect to calculator.php
}

如何在Javascript中执行此操作？

或者，如果这是不可能的，你能建议一个替代方案吗？

谢谢！

编辑1：尝试@ joe的解决方案，但不确定如何使其工作？

$("#calculator").onsubmit(function() {
    if (first_valid && second_valid)
        return true;
    else 
        return false;
});

我认为@joe试图说表单只在返回值为true时才提交，但我试过了，但是表单提交的值是否为真？

编辑2：澄清

的index.php

<form id = "calculator" action = "./calculation.php" method = "post" >
    <table>
    <tr>
    <td>First number</td>
    <td><input type = "text" name = "first_num" id = "first_num"/></td>
    </tr>

    <tr>
    <td>Operator</td>
    <td>
    <select name = "operator">
        <option value = "+" name = "add">+</option>
        <option value = "-" name = "minus">-</option>
        <option value = "*" name = "multiply">*</option>
        <option value = "/" name = "divide">/</option>
    </select>
    </td>
    </tr>

    <tr>
    <td>Second number</td>
    <td><input type = "text" name = "second_num" id = "second_num" /></td>
    </tr>

    <tr>
    <td>
    <input type = "submit" name = "submit" id = "submit" onclick = "validate()"/>
    </td>
    </tr>
</table>
</form>

validate.js

function validate() {
    var first_num = $("#first_num").val();
    var second_num = $("#second_num").val();

    var regex = new RegExp("^[\\d]+$");

    var first_valid = regex.test(first_num);
    var second_valid = regex.test(second_num);

    var alert_string = "";


    if (!first_valid && second_valid) 
        alert_string += "First number invalid!<br />";
    else if (first_valid && !second_valid)
        alert_string += "Second number invalid!";
    else if (!first_valid && !second_valid)
        alert_string += "Both numbers invalid!";

    if (!first_valid || !second_valid)
        alert(alert_string);

    $("#calculator").onsubmit(function() {
        if (first_valid && second_valid)
            return true;
        else 
            return false;
    });
}

编辑3：将所有代码放入处理程序，不起作用？

$("#calculator").on('submit', function() {
    var first_num = $("#first_num").val();
    var second_num = $("#second_num").val();

    var regex = new RegExp("^[\\d]+$");

    var first_valid = regex.test(first_num);
    var second_valid = regex.test(second_num);

    var alert_string = "";

    if (!first_valid && second_valid) 
        alert_string += "First number invalid!";
    else if (first_valid && !second_valid)
        alert_string += "Second number invalid!";
    else if (!first_valid && !second_valid)
        alert_string += "Both numbers invalid!";

    if (!first_valid || !second_valid)
        alert(alert_string);

    if (first_valid && second_valid)
        return true;
    else 
        return false;
});

Answer 1

以下是表单验证问题的答案。

首先，为您的表单添加一个ID，以便您可以识别它。

<form id="calculator_form" action="calculator.php" method="post">

然后，为该表单附加提交处理程序。如果提交处理程序失败，则表单将不会提交。

document.getElementById('calculator_form').onsubmit = function() {
  if (!first_num_valid) {
    return false;
  }
  if (!second_num_valid) {
    return false;
  }
  return true;
}

好了，现在你的问题编辑有jquery。这改变了我的答案。

$("#calculator").on('submit', function() {
    if (first_valid && second_valid) {
        return true;
    }
    return false;
});

Answer 2

AJAX! （jQuery中的基本AJAX调用）

function validate() {
    // testing code
        if (yourRegexTest == true) {
        $.ajax({
        url: "calculator.php?data1=" + jsVar1 + "&data2=" + jsVar2; // ...etc
        type: 'GET',
        dataType: 'json',
        success: function(data) {

           // data[0] now carries the php variable $newVar1 (below)
           // data[1] now carries $newVar2 (below)
           // do stuff with data[0] and data[1];
           return false; // do not submit the form. The ajax call does what you want pressing the submit button to effectively do.
        }


        });
        } else {  alert('regex check failed');
                  return false; // do not submit the form. regex check failed.
                  }
}

<强> Calculator.php中

<?php
$var1 = $_GET['data1']; $var2 = $_GET['data2'];
$newVar1 = dostuffto($var1);
$newVar2 = dostuffto($var2);
echo json_encode(array($var1,$var2));
?>

另外 - “这是我的问题 - 我想这样做，当按下提交按钮时，只有传递所有正则表达式测试，页面才会传递到服务器。”

在提交按钮上使用<input type="submit" id="myID" value="sumbit" onclick="return validate();"/>

如上所述return对onclick按钮的submit事件true时，除非该函数返回{，否则将不会提交{1}}。在我的示例中，表单永远不会被“提交”，而是仅在正则表达式检查通过时才运行AJAX调用。

Answer 3

AJAX是您希望将异步发送到PHP的内容。这是关于这个主题的jQuery's API。收集您的表单信息，使用AJAX提交，并输入您的回调函数以捕获PHP启动的内容（您将用于在屏幕上向用户显示）。

我想提供的一个方面是，您在服务器端进行了一些验证。在客户端使用JS进行任何验证当然不是一件坏事，但恶意用户可以规避您的验证。我对验证的建议是用JS做一些基础知识，但要确保PHP正确地清理/验证输入。

修改

我有一个版本，你可以看一下使用原生JS（你最初的问题就是这个问题）。您似乎需要AJAX，但查看您的问题，您似乎只想提交表单。我之所以这么说，是因为您的代码中似乎没有直接的位置可以传递返回值。

无论如何，基本的想法是从你的数字字段中获取两个值，将它们作为数字检查，然后提交。试一试：

<form id = "calculator" action = "./calculation.php" method = "post" onsubmit="return validate()" > <table> <tr> <td>First number</td> <td><input type = "text" name = "first_num" id = "first_num"/></td> </tr> <tr> <td>Operator</td> <td> <select name = "operator"> <option value = "+" name = "add">+</option> <option value = "-" name = "minus">-</option> <option value = "*" name = "multiply">*</option> <option value = "/" name = "divide">/</option> </select> </td> </tr> <tr> <td>Second number</td> <td><input type = "text" name = "second_num" id = "second_num" /></td> </tr> <tr> <td> <input type = "submit" name = "submit" id = "submit" /> </td> </tr> </table> </form> <script type="text/javascript"> function validate() { var num1 = document.getElementById('first_num').value; var num2 = document.getElementById('second_num').value; if(!isNaN(num1) && !isNaN(num2)) { alert("Numbers!"); return true; } alert("Fail!"); return false; } </script>

希望有所帮助。我仍然可以强调，在现实生活中，您应该真正依赖服务器端数据验证。

如何从JavaScript调用PHP脚本？

3 个答案: