时间戳

首页 > 解决方案 > 有没有办法让 Regex 函数检查名字和姓氏？

javascript - 有没有办法让 Regex 函数检查名字和姓氏？

问题描述

我目前正在为我的编码课做作业（我是初学者）。任务是创建一个带有 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 中，每个名称有两个输入，还有一个按钮。我在第一个中输入了 Isaac 的名字，在第二个中输入了 Daniels。我希望警报是“耶！你的输入都是正确的！”，但我却得到“哦，不！那是无效的格式！”

标签： javascripthtmlregex

解决方案

你犯了两个错误：

  • 使用value而不是innerHTML. <input>不具有innerHTML
  • match返回一个始终为真的数组。甚至Boolean([]) => true。您应该使用test()而不是match.
  • 您RegExp不会在 first 之后传递包含大写字母的字符串。你应该使用/^[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);
    }
}

推荐阅读