有没有办法使Regex函数检查名字和姓氏？

Question

I'm currently doing an assignment for my coding class (I'm a beginner). The assignment is to create an HTML page with 2 inputs, one for a First Name, one for a Last Name, and to make a submit button that, when clicked, checks to see if the First and Last Names both start with an uppercase letter and contain at least 1 character. When they both match the regex, an alert is used and the console logs. When they don't, a different alert is used, and the console doesn't log. When I finished making the html and the script, I typed in a name in both inputs that should match the regex, but it only issues an alert for an incorrect input. There is something wrong, but I can't find it.

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);
    }
}

In the linked html that I didn't provide, there are two inputs for each name, as well as a button. I inputted the name Isaac in the first one and Daniels in the second. I expected the alert to be "Yay! Your inputs were all correct!", but I instead got "Oh no! Thats an invalid format!"

Answer 1

You are making two mistakes:

• Use value instead of innerHTML . <input> doesnot have innerHTML
• match returns an array which is always truthy. Even Boolean([]) => true . You should use test() instead of match .
• Your RegExp will not pass a string containing capital letter after first. You should use /^[AZ][a-zA-Z]*$/

Here is the code.

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);
    }
}

Note :Both the strings have same regex /^[AZ][az]*$/ so you could use every() to check on both.

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);
    }
}

Answer 2

You can use this regexp:

/^([A-Z][a-z]*)+$/

It will test that it starts with an uppercase letter, and is followed by lower case letters, and is at least one letter long.

You can use the regexp with .test() to get a true/false value.

 let regexp = /^([AZ][az]*)+$/ document.names.addEventListener('submit', e => { e.preventDefault() let firstValid = regexp.test(document.names.first.value) let lastValid = regexp.test(document.names.last.value) // Sanity check console.log(firstValid, lastValid) if (!firstValid) alert('First name is invalid!') else if (!lastValid) alert('Last name is invalid!') else alert('Both are valid!') }) 

 <form name="names"> <input type="text" name="first" placeholder="First Name"> <input type="text" name="last" placeholder="Last Name"> <p> <input type="submit" value="Check Names"> </p> </form>