带有&&和||的if语句 在JavaScript中

Question

码：

// if (image.substring(0,7) != "http://" && image.substring(image.length-4) != ".jpg" || ".png")
if (image.substring(0,7) != "http://" && image.substring(image.length-4) != ".jpg" && image.substring(image.length-4) != ".png")
    {
            // do stuff
    }

上下文：尝试在JavaScript中使用&&和||进行if语句 运算符，但无法解决问题...可能是由于JavaScript如何返回真假值。

编辑：
完整代码：

function validateContent(title, rating, link, image, desc)
{
    var flag = true;

    // add more if-statements
    if (title == "")
    {
        $("#inputTitle").css("background-color", "red");
        flag = false;
    }
    if (rating == 0)
    {
        $("#selectRating").css("background-color", "red");
        flag = false;
    }
    if (link.substring(0,26) != "http://www.imdb.com/title/")
    {
        $("#inputLink").css("background-color", "red");
        flag = false;
    }
    // if (image.substring(0,7) != "http://" && image.substring(image.length-4) != ".jpg" || ".png")
    //if (image.substring(0,7) != "http://" && image.substring(image.length-4) != ".jpg" && image.substring(image.length-4) != ".png")
    //if ((image.substring(0,7) != "http://") && (image.substring(image.length-4) != ".jpg") && (image.substring(image.length-4) != ".png"))
    //if (image.substring(0,7) != "http://" && (image.substring(image.length-4) != ".jpg" || image.substr(image.length-4) !=  ".png"))
    //if (/^http:\/\/.*\.(jpg|png)$/.test(image))
    if ((image.substring(0,7) != "http://") && ((image.substring(image.length-4) == true) != ".jpg") && ((image.substring(image.length-4) == true) != ".png"))
    {
            $("#inputImage").css("background-color", "red");
            flag = false;
    }
    return flag;
}

function addContent()
{
    var title = $("#inputTitle").val();
    var rating = $("#selectRating option:selected").index();
    var link = $("#inputLink").val();
    var image = $("#inputImage").val();
    var desc = $("#textareaDescription").val();

    if (validateContent(title, rating, link, image, desc))
    {
        document.forms.formFilmerPHP.submit();
    }
}

function disableOption(pos)
{
    $("#selectRating option:eq(" + pos + ")").prop("disabled", true);
}

function validateInputs(inputType)
{
    // add more cases
    switch(inputType)
    {
        case "title":
            var title = $("#inputTitle").val();
            if (title != "")
                $("#inputTitle").css("background-color", "white");
            break;
        case "rating":
            var rating = $("#selectRating option:selected").index();
            if (rating != 0)
                $("#selectRating").css("background-color", "white");
            break;
        case "link":
            var link = $("#inputLink").val();
            if (link.substring(0,26) == "http://www.imdb.com/title/")
                $("#inputLink").css("background-color", "white");
            break;
    }
}

function preventDefault()
{
    $("#btnAddContent").click(function(event) {event.preventDefault();});
}

function addEventListeners()    // QUESTION: when to use anonymous functions and when not to when adding eventlisteners in order to safely attach functions without invoking them?
{
    // misc eventlisteners
    $("#selectRating").on("focus", function() {disableOption(0);});

    // real-time polling of invalid input correction
    $("#inputTitle").on("input", function() {validateInputs("title");});                    // QUESTION:    takes some time before this fires, how to make it fire more quickly?
                                                                                                                            // ANSWER:      use the "oninput" event, previously used onkeydown
    $("#selectRating").on("change", function() {validateInputs("rating");});
    $("#inputLink").on("input", function() {validateInputs("link");});

    // main eventlisteners
    $("#btnAddContent").on("click", function() {addContent();});
}

function init()
{
    preventDefault();
    addEventListeners();
}

/* method used to test during development */
function devtest()
{

}

$(document).ready(init);

编辑：

    var a = image.substring(0,7);
    var b = image.substring(image.length-4);
    alert(a);
    alert(b);
    if(a != "http://" && b != ".jpg" && b != ".png")
    {
            $("#inputImage").css("background-color", "red");    // <-- not being executed
            flag = false;
    }
    return flag;

无法获得$("#inputImage").css("background-color", "red"); 即使条件应评估为true也要执行的语句。

Answer 1

当字符串的第一部分不是http://且字符串的后四个字符既不是.jpg也不是.png时，以下代码将被评估为true。

if (image.substring(0,7) != "http://" && 
    image.substring(image.length-4) != ".jpg" && 
    image.substring(image.length-4) != ".png")

Answer 2

好的，经过一夜的睡眠，以下是正确的解决方案：

    var imagebegin = image.substring(0,7);
    var imageend = image.substring(image.length-4);
    if(imagebegin != "http://" || (imageend != ".jpg" && imageend != ".png"))
    {
            $("#inputImage").css("background-color", "red");
            flag = false;
    }
    return flag;

仅当字符串的开头为“ http：//”且结尾为“ .jpg”或“ .png”时，才会进行验证，如果不满足以下任何一个条件，则if语句的计算结果为如果为true，则将执行其中的语句（包括将标志设置为false）。

Answer 3

抱歉，我没有正确阅读您的答案，但我认为我还是给出了正确的提示

if (image.substring(0,7) != "http://" && image.substring(image.length-4) != ".jpg" && (image.substring(image.length-4) != ".png" || image.substring(image.length-4) != 'or'))