JavaScript中的Alert（）循环

Question

我对JS非常陌生，但是现在我正在尝试创建一种表单验证方法，该方法将不断检查所有条目都不等于NaN或NULL（我将其描述为“”）。 但是我认为我没有正确利用“ alert() ”函数，并且它不会停止检查足够长的时间以使某人重新输入信息。

我的逻辑是保留在“ checkblanks”函数中，同时返回布尔值“ false”，但我的警报消息不会停止在屏幕上显示。

---

然后，当我通过Firefox强制“停止”警报并填写x1，x2，x3字段时，它将两次打印出operations功能。

---

我的JS

//Direction Toggle
$("p, #answer").hide();

$("h1").click(function () {
    $(this).next().slideToggle(300);
});

function testResults(form) {

//Form validation
while (checkblanks(form) == false) {
    alert("Please fill in all numeric values");
    checkblanks(form);
}

function checkblanks(pform1) {
    var display = "";

    if (pform1.x1.value == "" || pform1.x1.value == NaN) {
        display += "x1, ";
    }

    if (pform1.x2.value == "" || pform1.x2.value == NaN) {
        display += "x2, ";
    }

    if (pform1.x3.value == "" || pform1.x3.value == NaN) {
        display += "x3";
    }
    if (display != "") {
        return false;
    } else {
        return true;
    }
}

//Complete operations if you're all set!
operations(form);

function operations(form) {
    //JQuery Answer Show
    $(".button").click(function () { //after form submission
        $(".matrix").slideUp(1000, function () { //hiding the matrix form
            $("#answer").slideDown(1000); //and display the answer
        });
    });

    //System Class Local to operations function
    function system(x1, x2, x3, y1, y2, y3, z1, z2, z3, a1, a2, a3) {
        this.x1 = x1;
        this.x2 = x2;
        this.x3 = x3;
        this.y1 = y1;
        this.y2 = y2;
        this.y3 = y3;
        this.z1 = z1;
        this.z2 = z2;
        this.z3 = z3;
        this.a1 = a1;
        this.a2 = a2;
        this.a3 = a3;
        this.calcDanswer = function () {
            return (this.x1 * ((this.y2 * this.z3) - (this.z2 * this.y3))) - (this.y1 * ((this.x2 * this.z3) - (this.z2 * this.x3))) + (this.z1 * ((this.x2 * D.y3) - (this.y2 * this.x3)));
        };
        this.calcXanswer = function () {
            return (this.a1 * ((this.y2 * this.z3) - (this.z2 * this.y3))) - (this.y1 * ((this.a2 * this.z3) - (this.z2 * this.a3))) + (this.z1 * ((this.a2 * this.y3) - (this.y2 * this.a3)));
        };
        this.calcYanswer = function () {
            return (this.x1 * ((this.a2 * this.z3) - (this.z2 * this.a3))) - (this.a1 * ((this.x2 * this.z3) - (this.z2 * this.x3))) + (this.z1 * ((this.x2 * this.a3) - (this.a2 * this.x3)));
        };
        this.calcZanswer = function () {
            return (this.x1 * ((this.y2 * this.a3) - (this.a2 * this.y3))) - (this.y1 * ((this.x2 * this.a3) - (this.a2 * this.x3))) + (this.a1 * ((this.x2 * this.y3) - (this.y2 * this.x3)));
        };
    }

    //Assign x1-a3
    var x1 = form.x1.value;
    var x2 = form.x2.value;
    var x3 = form.x3.value;
    var y1 = form.y1.value;
    var y2 = form.y2.value;
    var y3 = form.y3.value;
    var z1 = form.z1.value;
    var z2 = form.z2.value;
    var z3 = form.z3.value;
    var a1 = form.a1.value;
    var a2 = form.a2.value;
    var a3 = form.a3.value;

    //Pass to constructor and calculate
    var D = new system(x1, x2, x3, y1, y2, y3, z1, z2, z3, a1, a2, a3);
    var X = D.calcXanswer() / D.calcDanswer();
    var Y = D.calcYanswer() / D.calcDanswer();
    var Z = D.calcZanswer() / D.calcDanswer();


    // printing to console
    var out = document.getElementById('real-answer');
    out.innerHTML += "<b>The equations you entered were:</b>" + "<br />" + D.x1 + "x + " + D.y1 + "y + " + D.z1 + "z = " + D.a1 + "<br />" + D.x2 + "x + " + D.y2 + "y + " + D.z2 + "z = " + D.a2 + "<br />" + D.x3 + "x + " + D.y3 + "y + " + D.z3 + "z = " + D.a3 + "<br /><br />" +

        "The answer for <b>D</b> is " + D.calcDanswer() + "<br />" +
        "The answer for <b>Dx</b> is " + D.calcXanswer() + "<br />" +
        "The answer for <b>Dy</b> is " + D.calcYanswer() + "<br />" +
        "The answer for <b>Dz</b> is " + D.calcZanswer() + "<br />" +
        "<b>X</b> is " + X + "<br />" +
        "<b>Y</b> is " + Y + "<br />" +
        "<b>Z</b> is " + Z + "<br />" + "<br />";
    }
}

我的HTML

<body>
    <!--DIRECTIONS & FORM-->
    <div class="matrix">
            <h1><span id="highlight">How Does This Work?</span></h1>

        <p>Type in all the information for your system of three equations.
            <br />When finished, hit "Go".</p>
        <!--Form-->
        <FORM NAME="myform" id="form" ACTION="" METHOD="GET">
            <input type="text" name="x1" />x +
            <input type="text" name="y1" />y +
            <input type="text" name="z1" />z =
            <input type="text" name="a1" />
            <br />
            <input type="text" name="x2" />x +
            <input type="text" name="y2" />y +
            <input type="text" name="z2" />z =
            <input type="text" name="a2" />
            <br />
            <input type="text" name="x3" />x +
            <input type="text" name="y3" />y +
            <input type="text" name="z3" />z =
            <input type="text" name="a3" />
            <br />
            <input type="button" class="button" name="button" value="GO" onClick="testResults(this.form)" />
        </FORM>
        <!--....................................-->
    </div>
    <!--ANSWER-->
    <div id="answer">
         <h1><span id="highlight">The Answer:</span></h1>

        <div id='real-answer'></div>
    </div>
</body>

不幸的是，我创建的jsfiddle没有显示浏览器显示网页的方式，但这是我的代码： http : //jsfiddle.net/Xqd5W/

Answer 1

<input type="number" required />

问题解决了。

Answer 2

提醒您错误消息并返回false，而不是while循环：

if(checkblanks(form) === false) {
    alert("Please fill in all numeric values");
    return false;
}

毕竟，您无法继续，并且用户在纠正错误后应再次使用“提交/执行”按钮。 同样，连续检查内容并不是JavaScript的理想之选，相反，您将监听诸如表单值更改之类的事件，并对它们做出反应。

重复的问题

操作中的第一个operations是将事件侦听器添加到“提交”按钮：

function operations(form) {
  $(".button").click(function () { //after form submission
        $(".matrix").slideUp(1000, function () { //hiding the matrix form
            $("#answer").slideDown(1000); //and display the answer
        });
    });

这样做是为了隐藏.matrix并显示答案， 只要在this之后按下按钮 。 但是，这并不是您真正想要做的。 相反，你要隐藏的.matrix并显示#answer 在这一点上 。 此时，不要完全添加事件侦听器，而要完全执行以下操作：

function operations(form) {
    $(".matrix").slideUp(1000, function () { //hiding the matrix form
        $("#answer").slideDown(1000); //and display the answer
    });
    // ...

更好的是，在编辑完答案的innerHTML之后，在操作结束时执行这些步骤。

Answer 3

侦听“提交”事件，而不是while循环。 例如：

$('input').on('submit',function(){
    checkblanks(form);
});