Question

所以我有一个.js文件来检查我的表单的值。我正在尝试检查表单值是否为空，并且其中一个值包含特定的文本（在本例中为我的名字）。如果表单确实包含我的名字，那么运行脚本的其余部分。

在我评论//等等的地方，运行了一个发布到PHP文件的AJAX脚本。

这一切都按预期运行，直到我运行额外的if语句检查我姓名的输入值。

    $('#submit').click(function(e){

            this.enabled=true;

    if ($.trim($("#name").val()) === "" || $.trim($("#topic_title").val()) === ""){
    $('#message').html('you did not fill out one of the fields').css("color", "#be4343")
            return false;

if($('#name').val().indexOf("Rich") != -1){ // without this if statement, the code runs fine.
        $('#message').html("You have entered the wrong name.");
        return false;
    }

     } else {


if($('#name, #topic_title').length && $('#name, #topic_title').val().length){

        var name = $("#name").val();
        var topic_title = $("#topic_title").val();

    }}
    // etc etc
    });

问题：我如何检查id'＃name'的值是否为空，并且它包含特定的文本？

提前致谢，

里奇。

解决方案：

我删除了附加的if语句，并包含以下代码。

var name = $('#name').val();
if ( name.indexOf("Rich") || $.trim($("#name").val()) === ""){

Answer 1

如果您始终如一地缩进代码，那么您就会明白为什么会遇到问题：

$('#submit').click(function(e) {

    this.enabled = true;

    if ($.trim($("#name").val()) === "" || $.trim($("#topic_title").val()) === "") {
        $('#message').html('you did not fill out one of the fields').css("color", "#be4343")
        return false;

        if ($('#name').val().indexOf("Rich") != -1) { // Note that this is WITHIN the `if ($.trim($("#name").val()) === "" || $.trim($("#topic_title").val()) === "")` condition
            $('#message').html("You have entered the wrong name.");
            return false;
        }

    } else {


        if ($('#name, #topic_title').length && $('#name, #topic_title').val().length) {

            var name = $("#name").val();
            var topic_title = $("#topic_title").val();

        }
    }
    // etc etc
});

如果您希望对其进行处理，则需要else if来代替该条件：

$('#submit').click(function(e) {

    this.enabled = true;

    if ($.trim($("#name").val()) === "" || $.trim($("#topic_title").val()) === "") {
        $('#message').html('you did not fill out one of the fields').css("color", "#be4343")
        return false;

    } else if ($('#name').val().indexOf("Rich") != -1) { // without this if statement, the code runs fine.
        $('#message').html("You have entered the wrong name.");
        return false;

    } else {


        if ($('#name, #topic_title').length && $('#name, #topic_title').val().length) {

            var name = $("#name").val();
            var topic_title = $("#topic_title").val();

        }
    }
    // etc etc
});

（嗯，正如你return那样，那些可能只是if而不是else if ......）

但是还有其他问题，例如最后一个块中的这个表达式：

$('#name, #topic_title').length

...会检查您的DOM中是否存在#name或#topic_title元素（它没有做任何事情来检查它们的值，而且它没有＆＃39;要求他们两个存在，只有其中一个），并且这个：

$('#name, #topic_title').val().length

...只检查#name中的值，它会完全忽略#topic_title中的值，因为当用作getter时，val只获取<的值{ jQuery集中的strong> first 元素。（几乎所有可以作为getter或setter的jQuery函数都是这样的;异常是text，它与其他函数不同。）

最后，这一行：

this.enabled = true;

...几乎可以肯定是无操作，因为如果按钮未启用则无法点击按钮，而lshettyl points out的属性名称为disabled ，而不是enabled。如果您尝试启用它，请this.disabled = false;;如果您尝试禁用它，请this.disabled = true;。

Answer 2

根据您的代码，我假设您的表单中包含class或ID（或没有）。使用表单submit事件而不是提交按钮的click事件是很聪明的。这样你就可以确保表格也可以通过输入按钮提交（记得可访问性吗？）。这只是T.J. Crowder's答案的扩展，它有很多优点，您可以从中学习/改进编码。

//Let's say your form has an ID 'topic'
$("#topic").on("submit", function() {
    //Cache jQuery objects that would be resued, for better performance.
    var $name = $("#name"),
        $title = $("#topic_title"),
        $msg = $('#message');

    //One of the elements doesn't exist (exit)
    //1 + 1 <= 1
    if ($name.length + $title.length <= 1) {
        return;
    }

    if ($.trim($name.val()) === "" || $.trim($title.val()) === "") {

        $msg.html('you did not fill out one of the fields').css("color", "#be4343")
        return;

    } else if ($name.val().indexOf("Rich") !== -1) {

        $msg.html("You have entered the wrong name.");
        return;

    } else {
        //You do not need further checks such as length, val etc.
        //as they have already been checked above.
        var name = $name.val();
        var topic_title = $title.val();
    }
});

Answer 3

您可以进行比较以了解它是否为空：

if($('#name, #topic_title').length && $('#name, #topic_title').val().length){

     var name = $("#name").val();   
     var topic_title = $("#topic_title").val();

    }}
    if(name=='' || name==undefined){
       //do stuff here
    }
    });

jQuery - 检查val不为空并包含特定的文本

3 个答案: