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

Question

在函数内部设置全局变量标志时出错。

全局变量声明

    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; 
       }
    }

我在textbox的onfocuout事件上调用前两个函数，在按钮点击时调用validate（）函数。我面临的问题是：Quantity（）内部的标志没有设置为false。尽管字段保持空白，但会插入记录。

Answer 1

如果您在validate（）中得到flag=true，那么您可能首先调用Quantity（），它会将flag设置为false，然后将Name（）设置为true，因此它绕过了validate（（）函数。

Answer 2

这不是正确的方法，您正在尝试实现验证。考虑这样的场景，当用户在第一个字段中输入了正确的值时，标志将被设置为true，第二个字段为空，表单将被提交并保持true，反之亦然。

如果想通过这种方式实现，请保留与字段数量一样多的标志变量，并检查validate中的所有变量。

或者，使用".each"迭代每个元素并验证它，并不断将验证台面追加到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语句。该语句应显示控制台的输出