Question

我在设置函数内的全局变量 flag 时遇到错误。

全局变量声明

    var flag = false;

验证文本框的功能

    //To validate Product Name field
    function Name() {
        var pName = document.getElementById('addPName').value;
        if (pName == "") {
            $('#productNameError').text('Product Name is required');
            flag = false;
        }
        else {
            $('#productNameError').text('');
            flag = true;
        }
    }

验证数量的功能

     //To validate Product Quantity Field
     function Quantity() {
        var pQty = document.getElementById('addPQty').value;
        if (pQty != "") {

            var regex = /^[1-9]\d*(((,\d{3}){1})?(\.\d{0,2})?)$/;
            if (regex.test(pQty)) {
                $('#productQtyError').text('');
                flag = true;
            }
            else {
                $('#productQtyError').text('Enter Quantity of the Product');
                flag = false;
            }
        }
        else {
            $('#productQtyError').text('Quantity is required');
            flag = false;
        }
    }

//验证摘要

    function validate() {
        if (flag == true) {
            $('#validationSummary').text('');
            return true;
        }
        else {
            $('#validationSummary').text('Please fill out required fields.');
            return false; 
       }
    }

我在文本框的onfocusout事件上调用前两个函数，并在按钮单击时调用validate（）函数。我面临的问题是：在Quantity（）标志内部没有设置为false。虽然该字段仍为空白，但会插入记录。

Answer 1

如果你在validate（）中得到flag = true，那么你可能先调用Quantity（），然后设置标志false然后将Name（）设置为true，这样就绕过了validate（）函数。

Answer 2

这不是正确的方法，您正在尝试进行验证。考虑一下场景，当用户在第一个字段中输入正确的值时，flag将被设置为true，第二个字段为空，amd表格将被提交，反之亦然。

如果想通过这种方式实现，请保留尽可能多的标志变量，因为字段数和amd中的所有变量都在内。

或者，使用＆＃39; .each＆＃39;迭代每个元素并验证它并继续将验证消息附加到dom对象。

由于

Answer 3

不要使用全局变量

如果您使用全局变量，您将度过一段美好时光，您可以使用揭示模块模式来封装一些混乱

建议这样的事情：

var app = app || {};
app.product =  app.product || {};
app.product.validate = app.product.validate || {};

app.product.validate.isValid = false;

app.product.validate.name = function(){
    var pName = document.getElementById('addPName').value;

    if (pName == "") {
        $('#productNameError').text('Product Name is required');
        app.product.validation.flag = false;
    } else {
        $('#productNameError').text('');
        app.product.validation.flag = true;
    }
}


app.product.validate.quantity = function() {
    var pQty = document.getElementById('addPQty').value;

    if (pQty != "") {

        var regex = /^[1-9]\d*(((,\d{3}){1})?(\.\d{0,2})?)$/;

        if (regex.test(pQty)) {

            $('#productQtyError').text('');
            app.product.validate.flag = true;

        } else {
            $('#productQtyError').text('Enter Quantity of the Product');
            app.product.validate.flag = false;
        }
    } else {
        $('#productQtyError').text('Quantity is required');
        app.product.validate.flag = false;
    }
}

console.log是您的朋友

尝试在其中一些方法中添加console.log，我猜你的问题是，某些东西是按照你预期的顺序调用的，并将标志设置为你不期望的值

如果打开开发人员控制台，可以像这样console.log执行console.log语句，应该显示控制台的输出

Answer 4

可能是同步问题，您可以尝试使用Promises，请查看以下文章：

JavaScript Promises

JavaScript验证中的全局变量设置失败

4 个答案: