Javascript jquery在.on内运行条件验证

Javascript jquery在.on内运行条件验证,javascript,jquery,Javascript,Jquery,我有一个ID为primarySearch的表单。它有3个文本输入,它们都有自己的ID,如下所示:ecNumber、casNumber、substanceName 我有下面的js。如果用户在primarySearch中的文本输入中输入任何内容,它将运行一个名为processPrimarySearch的函数,并向其发送适当的输入值: $('#primarySearch input[type="text"]').on({ "keyup": function(e) { // Igno

我有一个ID为primarySearch的表单。它有3个文本输入,它们都有自己的ID,如下所示:ecNumber、casNumber、substanceName

我有下面的js。如果用户在primarySearch中的文本输入中输入任何内容,它将运行一个名为processPrimarySearch的函数,并向其发送适当的输入值:

$('#primarySearch input[type="text"]').on({
    "keyup": function(e) {
      // Ignore tab key 
      if (e.which != 9) {
        processPrimarySearch.call(this);
      }
    }
});

function processPrimarySearch() {
   // ...
}
我还有一些其他的js,就在document.ready里面,它阻止用户输入除数字和破折号以外的任何东西-但只在ecNumber和casNumber字段中-请注意,我是从中改编的。尽管此代码在用户在这两个字段中输入内容时触发,但它也会导致processPrimarySearch运行,而不管用户输入是否有效。这是因为上述代码与以下代码之间没有连接:

$('#ecNumber, #casNumber').keypress(function (e) {
    var allowedChars = new RegExp("^[0-9\-]+$");
    var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
    if (allowedChars.test(str)) {
        return true;
    }
    e.preventDefault();
    return false;
}).keyup(function() {
    // the addition, which will check the value after a keyup (triggered by Ctrl+V)
    // We take the same regex as for allowedChars, but we add ^ after the first bracket : it means "all character BUT these"
    var forbiddenChars = new RegExp("[^0-9\-]", 'g');
    if (forbiddenChars.test($(this).val())) {
        $(this).val($(this).val().replace(forbiddenChars, ''));
    }
});
此时发生的结果是,如果在ecNumber中输入了一个字符,如z,则验证正则表达式代码将触发并停止输入中出现的字符z-良好。但是,processPrimarySearch也将触发,因为它是在.on中为primarySearch表单中的任何输入定义的

我的问题是: 我要做的是在我的.on内运行验证正则表达式,但仅当它是ecNumber或casNumber字段substanceName时,才能在此处进行验证

我已经成功地编写了下面的代码,它使用一个数组来表示用户正在哪个字段上输入内容。我在这里执行console.log是我需要验证正则表达式的地方

 $('#primarySearch input[type="text"]').on({
    "keyup": function(e) {
      // Ignore tab key
      if (e.which != 9) {

        var arr = ["ecNumber", "casNumber"];
        if ($.inArray($(this).attr('id'), arr)!== -1) {
            console.log($(this).attr('id'));
        }  

        processPrimarySearch.call(this);
      }
    }
});

最好的方法是什么?我不确定是否将执行正则表达式的代码移动到函数中,然后用.call调用它?还是其他方法?这本质上是异步的,有什么问题吗?

这都是关于程序流以及如何处理它的。您的问题在您最后一次展示代码时并不是一个真正的异步问题。这里有许多可能的解决方案中的一个。我在代码中添加了一些注释来解释基本原理

$('#primarySearch input[type="text"]').on({
    "keyup": function(e) {
        // if this is not the tab key and the input contains valid characters
        if (e.which != 9 && isThisValid($(this), e)) {
            processPrimarySearch.call(this);
        }
        else {
            e.preventDefault();
        }
    }
});


function isThisValid($elem, event) {
    var ids = ["ecNumber", "casNumber"], // ids to validate, everything else is valid
        result = true; // default result

    // is this one of the id's to validate?
    if(ids.indexOf($elem.attr('id')) !== -1) {
        // do some validation
        var allowedChars = new RegExp("^[0-9\-]+$"),
            str = String.fromCharCode(!event.charCode ? event.which : event.charCode);

        // is it valid?
        if (!allowedChars.test(str)) {
            result = false;
        }
    }

    return result;
}

function processPrimarySearch() {
    // ...    
}

ecNumber和CASNAMER是否为输入?如果你特别针对他们,比如$'ecNumber,casNumber'。。。在添加其他$'primarySearch'之前。。。。这将导致附加的第一个函数运行firstYes,所有3个字段ecNumber、casNumber、substanceName都是文本输入。我已经更新了这篇文章,提供了更多关于正在发生的事情的信息。问题是我发布的第一段代码和第二段代码之间没有任何联系,因此processPrimarySearch运行时与正则表达式验证的结果无关。我不确定您所说的更通用是什么意思。我发布的代码确实按照您预期的顺序运行。在keyup处理程序中,if语句等待函数isthisvailed返回,然后程序流从那里继续。如果您觉得这个答案很有用,欢迎您投赞成票和/或接受。