javascript - 有没有办法让正则表达式函数来检查名字和姓氏？

Question

我目前正在为我的编码类(class)做作业(我是初学者)。作业是创建一个包含 2 个输入的 HTML 页面，一个用于名字，一个用于姓氏，并创建一个提交按钮，单击该按钮时会检查名字和姓氏是否均以大写字母开头并且至少包含 1 个字符。当它们都与正则表达式匹配时，将使用警报并记录控制台。如果不这样做，则会使用不同的警报，并且控制台不会记录日志。当我完成 html 和脚本的制作后，我在两个输入中都输入了一个应与正则表达式匹配的名称，但它只会针对不正确的输入发出警报。有问题，但我找不到它。

function regexChecker(firstName, lastName) {
    firstName = document.getElementById("firstName").innerHTML;
    lastName = document.getElementById("lastName").innerHTML;
    let firstNameRegex = /^[A-Z][a-z]*$/;
    let lastNameRegex = /^[A-Z][a-z]*$/;
    if (firstName.match(firstNameRegex) && lastName.match(lastNameRegex)) {
        alert('Yay! Your inputs were all correct!' );
        console.log(true);
    }
    else {
        alert('Oh no! Thats an invalid format!' );
        console.log(false);
    }
}

在我未提供的链接 html 中，每个名称有两个输入以及一个按钮。我在第一个输入了艾萨克的名字，在第二个输入了丹尼尔斯的名字。 我预计警报会是“耶!您的输入都是正确的!”，但我得到的却是“哦，不!那是无效的格式!”

Answer 1

你犯了两个错误:

• 使用value而不是innerHTML 。 <input>没有innerHTML
• match返回一个始终为真的数组。偶Boolean([]) => true 。您应该使用test()而不是match .
• 您的RegExp不会传递在第一个之后包含大写字母的字符串。您应该使用/^[A-Z][a-zA-Z]*$/

这是代码。

function regexChecker(firstName, lastName) {
    firstName = document.getElementById("firstName").value;
    lastName = document.getElementById("lastName").value;
    let firstNameRegex = /^[A-Z][a-zA-Z]*$/;
    let lastNameRegex = /^[A-Z][a-zA-Z]*$/;
    if (firstNameRegex.test(firstName) && lastNameRegex.test(lastName)) {
        alert('Yay! Your inputs were all correct!' );
        console.log(true);
    }
    else {
        alert('Oh no! Thats an invalid format!' );
        console.log(false);
    }
}

注意:两个字符串都有相同的正则表达式 /^[A-Z][a-z]*$/所以你可以使用every()检查两者。

function regexChecker(firstName, lastName) {
    firstName = document.getElementById("firstName").value;
    lastName = document.getElementById("lastName").value;
    let regex = /^[A-Z][a-zA-Z]*$/;
    if ([firstName,lastName].every(x => regex.test(x))) {
        alert('Yay! Your inputs were all correct!' );
        console.log(true);
    }
    else {
        alert('Oh no! Thats an invalid format!' );
        console.log(false);
    }
}