javascript - 确保输入的名称不以空格结尾

Question

我正在尝试获取它，以便如果我输入以空格结尾的名称，文本字段将变为红色。大多数代码都有效，但只有一种方法似乎无效。

问题一定是在索引的最后一部分？

var NamePass = true;

function ValidateName() {
    var BlankPass = true;
    var GreaterThan6Pass = true;
    var FirstBlankPass = true;
    var BlankMiddleName = true;

    if (document.getElementById('Name').value == "") {
        BlankPass = false;
    }

    var Size = document.getElementById('Name').value.length;
    console.log("Size = " + Size);

    if (Size < 7) {
        GreaterThan6Pass = false;
    }

    if (document.getElementById('Name').value.substring(0, 1) == " ") {
        FirstBlankPass = false;
    }

    var LastIndex = document.getElementById('Name').value.lastIndexOf();

    if (document.getElementById('Name').value.substring((LastIndex - 1), 1) == " ") {
        FirstBlankPass = false;
    }

    string = document.getElementById('Name').value;
    chars = string.split(' ');
    if (chars.length > 1) {} else
        BlankMiddleName = false;

    if (BlankPass == false || GreaterThan6Pass == false || FirstBlankPass == false || BlankMiddleName == false) {
        console.log("BlankPass = " + BlankPass);
        console.log("GreaterThan6Pass = " + GreaterThan6Pass);
        console.log("FirstBlankPass = " + FirstBlankPass);
        console.log("BlankMiddleName = " + BlankMiddleName);
        NamePass = false;
        document.getElementById('Name').style.background = "red";
    } else {
        document.getElementById('Name').style.background = "white";
    }
}

http://jsfiddle.net/UTtxA/10/

Answer 1

lastIndexOf 获取字符的最后一个索引，而不是字符串中的最后一个索引。我认为您打算改用 length:

var lastIndex = document.getElementById('Name').value.<b>length</b>;

但是，另一个问题是 substring 采用开始和结束索引，而不是开始索引和子字符串长度。您可以改用 substr，但 charAt 更简单:

if (document.getElementById('Name').value.<b>charAt</b>(lastIndex - 1) == " ") {
    FirstBlankPass = false;
}

现在，进行一些通用的代码改进。不要以 true 开始所有变量并将它们有条件地设置为 false，只需将它们设置为条件:

var NamePass = true;

function ValidateName() {
    var value = document.getElementById('Name').value;

    var BlankPass = value == "";
    var GreaterThan6Pass = value.length > 6;
    var FirstBlankPass = value.charAt(0) == " ";
    var LastBlankPass = value.charAt(value.length - 1) == " ";
    var BlankMiddleName = value.split(" ").length <= 1;

    if (BlankPass || GreaterThan6Pass || FirstBlankPass || LastBlankPass || BlankMiddleName) {
        console.log("BlankPass = " + BlankPass);
        console.log("GreaterThan6Pass = " + GreaterThan6Pass);
        console.log("FirstBlankPass = " + FirstBlankPass);
        console.log("BlankMiddleName = " + BlankMiddleName);
        NamePass = false;
        document.getElementById('Name').style.background = "red";
    } else {
        document.getElementById('Name').style.background = "white";
    }
}

还有几点需要注意:

• 使用 camelCase 变量名而不是 PascalCase 可能是个好主意，后者通常为构造函数保留
• blah == false 实际上应该写成 !blah
• 空的 if 后跟 else 也可以替换为 if (!someCondition)
• 该函数看起来应该返回 true 或 false，而不是设置全局变量 NamePass

倒数第二，你可以用一个正则表达式来总结这一切，但如果你打算根据实际错误向用户提供更具体的错误消息，那么我不会这样做。

function validateName() {
    return /^(?=.{6})(\S+(\s|$)){2,}$/.test(document.getElementById('name').value);
}

最后——请记住，并不是每个人都有中间名，甚至不是每个人都有一个超过 6 个字符的名字，正如@poke 指出的那样。