我想在我的验证代码中使用regex，但不知道该把它放在哪里？

Question

我的regex验证是针对名字、姓氏、电子邮件地址和密码。

我已经把验证放在名和姓上，但是没有用。

另外，谁能建议对密码字段也进行验证？先谢谢你了。

这是我的代码。

const form = document.querySelector("form");
const input = document.querySelectorAll("input");

form.addEventListener("submit",e =>{
    e.preventDefault();
    // console.log(e)
    
    const firstName = form.firstName.value.trim();
    const lastName = form.lastName.value.trim();
    const email = form.email.value.trim();
    const password = form.password.value.trim();
    const nameReg = /^[a-zA-ZàáâäãåąčćęèéêëėįìíîïłńòóôöõøùúûüųūÿýżźñçčšžÀÁÂÄÃÅĄĆČĖĘÈÉÊËÌÍÎÏĮŁŃÒÓÔÖÕØÙÚÛÜŲŪŸÝŻŹÑßÇŒÆČŠŽ∂ð ,.'-]+$/u;
    const emailReg =/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*/;
    
    
    if (firstName === "" && lastName === "" && email === "" && password === ""){
        first()
        last()
        mail()
        pass()
        border();
    } else if (lastName === "" && email === "" && password === ""){
        last();
        mail();
        pass();
        border();

    }else if (email === "" && password === ""){
        mail();
        pass();
        border();
    }else if (lastName === "" && email === ""){
        last();
        mail()
        border();
    }
    else if (lastName === "" && password === ""){
        last();
        pass();
    }else if(firstName === "" && lastName === ""){
        first();
        last();
        border();
    }
     else  if (firstName === "" && firstName === nameReg){
         first()
         border();

    } else if (lastName === "" && lastName === nameReg){
        last();
        border();
    } else if (email === ""){
         mail();
         border();
    } else if (password === ""){
        pass();
        border();
    }else{
        form.reset();
    }
})
///First Name Text
const first = () =>{
    document.getElementById("firstImg").style.display = "initial";
    document.getElementById("firstName").style.display = "block";
    form.firstName.placeholder = "";
}
// Last name Text
const last = () =>{
    document.getElementById("secondImg").style.display = "initial";
    document.getElementById("secondName").style.display = "block";
    form.lastName.placeholder ="";
}
// Email
const mail = () =>{
    document.getElementById("thirdImg").style.display = "initial";
    document.getElementById("third").style.display = "block";
    form.email.placeholder = "email@example/com";
    form.email.setAttribute("class","placeholder"); 
}
//Password Text
const pass = () =>{
    document.getElementById("fourthImg").style.display = "initial";
    document.getElementById("fourth").style.display = "block";
    form.password.placeholder ="";
}
/// Border for the input fields
const border = () =>{
    input.forEach((field)=>{
        if(field.value === ""){
            field.style.border ="2px solid hsl(0, 100%, 74%)";
        } else{
            field.style.border= "1px solid black";
        }
    }
)};

*,
*:focus,
*::before,
*::after {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
}
body{
    background-image:url(../images/bg-intro-desktop.png);
    background-color:  hsl(0, 100%, 74%);
    font-family: 'Poppins', sans-serif;
    height: 100%;
    width: 100%;
}
.grid{
    display: grid;
    grid-template-columns: 33% 40%;
    justify-content: space-evenly;
}
.h2{
    color: white;
    font-weight:bolder;
    font-size: 3.2em;
}
.paragraph{
    color: white;
    font-size: 0.9em;
}
#firstH2{
    margin-bottom: -14px;
}
.box{
    background-color: white;
    border-radius: 10px;
    text-align: center;
    height: auto;
    box-shadow: 0px 9px  rgba(0, 0, 0, 0.2);
}
.firstButton{
    font-family: 'Poppins', sans-serif;
    width: 100%;
    border: 0;
    color: white;
    background-color: hsl(248, 32%, 49%);
    font-size: 1.1em;
    padding: 16px;
    border-radius: 10px;
    box-shadow: 0px 9px  rgba(0, 0, 0, 0.2);
    font-weight: bolder; 
}
.firstButton span{
    font-size: 0.8em;
    font-weight: normal;
}
input {
    font-family: 'Poppins', sans-serif;
    width: 90%;
    padding: 15px;
    font-size: 1em;
    border: 1px solid hsl(246, 25%, 77%);
    border-radius: 5px;
    font-weight: 600;
    color:  hsl(249, 10%, 26%);
}
input:focus{
    font-family: 'Poppins', sans-serif;
    font-size: 1em;
    padding: 15px;
    border: 1px solid black;
    border-radius: 5px;
    font-weight: 600;
    color:  hsl(249, 10%, 26%);
}
input::placeholder{
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}
.placeholder::placeholder{
    color: hsl(0, 100%, 74%);
}
#greenButton{
    width: 90%;
    border: 0;
    padding: 16px;
    background-color: hsl(154, 59%, 51%);
    border-radius: 10px;
    box-shadow: 0px 5px hsl(154, 65%, 43%);
}
#greenButton span{
    font-family: 'Poppins', sans-serif;
    color: white;
    font-size: 1.3em;
    font-weight: bold;
}
#greenButton:hover{
    cursor: pointer;
    background-color: hsl(154, 94%, 65%);
}
.terms{
    color: hsl(246, 25%, 77%);
    font-size: 12px;
    margin-top: 2%;
    text-align: center;
}
.terms span a{
    text-decoration: none;
    color: hsl(0, 100%, 74%);
    font-weight: bold;
}
form{
    position: relative;
}
#firstImg{
    display: none;
    position: absolute;
    top: 13%;
    right: 9%;
}
#secondImg{
    display: none;
    position: absolute;
    top: 29%;
    right: 9%;
}
#thirdImg{
    display: none;
    position: absolute;
    top: 45%;
    right: 9%;
    
}
#fourthImg{
    display: none;
    position: absolute;
    bottom: 33.5%;
    right: 9%;
}
.errorMessage{
    font-size: 0.8em;
    color: hsl(0, 100%, 74%);
    text-align: right;
    font-style: italic;
    font-weight: 500;
    margin-right: 30px;
    margin-top: -25px;
    margin-bottom: 18px;
}
#firstName{
    display: none;
}
#secondName{
    display: none;
}
#third{
    display: none;
}
#fourth{
    display: none;
}
.attribution{
    font-size: 11px;
    text-align: center;
    color: white;
}
.attribution a {
    color: hsl(228, 45%, 44%);
}

@media only screen and (max-width:700px){
    body{
        background-image:url(../images/bg-intro-mobile.png);
    }
    .grid{
        grid-template-columns: 90%;
    }
    .h2,.paragraph{
        text-align: center;
    }

}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">
  <title>Intro component With Sign up Form</title>


</head>
<body>
  <div class="container">
    <div class="grid">
       <!-- 1st grid -->
        <div>
          <br><br><br><br><br><br><br><br>
          <h2 class="h2" id="firstH2">Learn to code by</h2>
          <h2 class="h2">watching others</h2><br>
          <p class="paragraph">See how experienced solve problems in real time. Watching scripted tutuorials is great, but 
            understanding how developers think is invaluable.</p>
        </div>
         <!-- 2nd grid -->
        <div>
          <div>
            <br><br>
            <button class="firstButton">Try it free 7 days <span>then $20/mo. thereafter</span></button>
            <br><br>
            <!-- box for white color -->
            <div class="box">
              <form>
                <br><br>
                <input type="text" name="firstName" placeholder="First Name"><br><br>
                <img src="../images/icon-error.svg" id="firstImg" alt="error">
                <div class="errorMessage" id="firstName">First Name cannot be empty</div>

                <input type="text" name="lastName" placeholder="Last Name"><br><br>
                <img src="../images/icon-error.svg" id="secondImg" alt="error">
                <div class="errorMessage" id="secondName">Last Name cannot be empty</div>

                <input type="email" name="email" placeholder="Email Address"><br><br>
                <img src="../images/icon-error.svg" id="thirdImg" alt="error">
                <div class="errorMessage" id="third">Looks like this is not an email</div>

                <input type="password" name="password" placeholder="Password"><br><br>
                <img src="../images/icon-error.svg" id="fourthImg" alt="error">
                <div class="errorMessage" id="fourth">Password cannot be empty</div>

                <button type="submit" id="greenButton"><span>CLAIM YOUR FREE TRIAL</span></button><br>

                <div class="terms">
                  By clicking the button you are agreeing to our <span><a href="#">Terms and Services</a></span>
                </div><br><br>
              </form>
            </div>

          </div>
        </div>
    </div>
  </div>

  
  <br><br>
  <footer>
    <p class="attribution">
      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
      Coded by <a href="#">Gurkiran Singh</a>.
    </p>
  </footer>
  <script src="js/script.js"></script>
</body>
</html>

这里是 a JSFiddle