使用 Vanilla JavaScript 对空和无效 email 进行表单验证（多输入类型）

Question

此代码仅适用于空 email 输入，但不适用于无效 email。 我想为每个问题显示不同的错误文本。 是否可以使用香草 javascript 来做到这一点？ 或者我的 javascript 代码有什么问题吗？

我还没有为无效的 email 输入添加错误文本。 请帮忙。 提前致谢。

 const form = document.querySelector('form'); const inputs = document.querySelectorAll('input'); const inputEmail = document.querySelector('.input-email') function validateEmail (email) { var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; return re.test(String(email).toLowerCase()); } form.addEventListener('submit',(e)=>{ e.preventDefault(); for(let i=0;i<inputs.length;i++){ if(.inputs[i].value){ inputs[i].parentElement.classList;add('error'). }else{ inputs[i].parentElement.classList;remove('error'). if(inputEmail){ if(validateEmail(inputEmail.value)){ inputEmail.parentElement.classList;remove('error'). }else{ inputEmail.parentElement.classList;remove('error'); } } } } })

 form { background: white; box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.247); padding: 1.5rem; border-radius: 0.5rem; }.infield { position: relative; margin-bottom: 1rem; } input { width: 100%; height: 3rem; border: 1px solid rgba(128, 128, 128, 0.425); border-radius: 0.3rem; padding-left: 1rem; }.infield.error input { border: 1px solid hsl(0, 100%, 74%); } input:active, input:focus { border: 1px solid hsl(247, 40%, 68%); outline: none; }::placeholder { color: hsl(249, 10%, 26%); font-weight: 600; }.infield.error::placeholder { color: hsl(0, 100%, 74%); }.error-image { display: none; position: absolute; top: 0.8rem; right: 1rem; }.infield.error.error-image { display: block; }.error-text { display: none; color: hsl(0, 100%, 74%); font-size: 0.7rem; font-style: italic; text-align: right; margin: 0.3rem 0; }.infield.error.error-text { display: block; } form button { width: 100%; height: 3rem; border: none; border-radius: 0.3rem; font-size: 0.9rem; font-weight: 700; text-transform: uppercase; color: white; background: hsl(154, 59%, 51%); box-shadow: 0 4px 0 0 hsl(154, 51%, 48%); cursor: pointer; } form button:hover { opacity: 0.8; } #terms { font-size: 0.7rem; font-weight: 500; color: hsl(246, 25%, 77%); margin: 1rem; text-align: center; } #terms a { font-weight: 700; text-decoration: none; color: hsl(0, 100%, 74%); }

 <form action="#" id="form"> <div class="infield"> <input type="text" placeholder="First Name"> <img src="./images/icon-error.svg" alt="icon-error" class="error-image"> <p class="error-text">First Name cannot be empty</p> </div> <div class="infield"> <input type="text" placeholder="Last Name"> <img src="./images/icon-error.svg" alt="icon-error" class="error-image"> <p class="error-text">Last Name cannot be empty</p> </div> <div class="infield"> <input type="text" placeholder="Email Address" class="input-email"> <img src="./images/icon-error.svg" alt="icon-error" class="error-image"> <p class="error-text">Looks like this is not an email</p> </div> <div class="infield"> <input type="password" placeholder="Password"> <img src="./images/icon-error.svg" alt="icon-error" class="error-image"> <p class="error-text">Password cannot be empty</p> </div> <button type="submit">Claim your free trial</button> <p id="terms">By clicking the button, you are agreeing to our <a href="#">Terms and Services</a></p> </form>

Answer 1

解决此问题的一个简单方法是让 HTML 处理此问题，您可以将 email 输入更改为：

<input type="email" required placeholder="Email Address" class="input-email">

这将处理这两种情况并显示一条消息。

Answer 2

通过将您的电子邮件检查放入循环中，电子邮件输入之后的任何输入都将覆盖更改。

将您的电子邮件检查移到循环之外，并在无效时添加错误图标：

 const form = document.querySelector('form'); const inputs = document.querySelectorAll('input'); const inputEmail = document.querySelector('.input-email') function validateEmail (email) { var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; return re.test(String(email).toLowerCase()); } form.addEventListener('submit',(e)=>{ e.preventDefault(); for(let i=0;i<inputs.length;i++){ if(.inputs[i].value){ inputs[i].parentElement.classList;add('error'). }else{ inputs[i].parentElement.classList;remove('error'). } } if(inputEmail){ if(validateEmail(inputEmail.value)){ inputEmail.parentElement.classList;remove('error'). }else{ inputEmail.parentElement.classList;add('error'); } } })

 form { background: white; box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.247); padding: 1.5rem; border-radius: 0.5rem; }.infield { position: relative; margin-bottom: 1rem; } input { width: 100%; height: 3rem; border: 1px solid rgba(128, 128, 128, 0.425); border-radius: 0.3rem; padding-left: 1rem; }.infield.error input { border: 1px solid hsl(0, 100%, 74%); } input:active, input:focus { border: 1px solid hsl(247, 40%, 68%); outline: none; }::placeholder { color: hsl(249, 10%, 26%); font-weight: 600; }.infield.error::placeholder { color: hsl(0, 100%, 74%); }.error-image { display: none; position: absolute; top: 0.8rem; right: 1rem; }.infield.error.error-image { display: block; }.error-text { display: none; color: hsl(0, 100%, 74%); font-size: 0.7rem; font-style: italic; text-align: right; margin: 0.3rem 0; }.infield.error.error-text { display: block; } form button { width: 100%; height: 3rem; border: none; border-radius: 0.3rem; font-size: 0.9rem; font-weight: 700; text-transform: uppercase; color: white; background: hsl(154, 59%, 51%); box-shadow: 0 4px 0 0 hsl(154, 51%, 48%); cursor: pointer; } form button:hover { opacity: 0.8; } #terms { font-size: 0.7rem; font-weight: 500; color: hsl(246, 25%, 77%); margin: 1rem; text-align: center; } #terms a { font-weight: 700; text-decoration: none; color: hsl(0, 100%, 74%); }

 <form action="#" id="form"> <div class="infield"> <input type="text" placeholder="First Name"> <img src="./images/icon-error.svg" alt="icon-error" class="error-image"> <p class="error-text">First Name cannot be empty</p> </div> <div class="infield"> <input type="text" placeholder="Last Name"> <img src="./images/icon-error.svg" alt="icon-error" class="error-image"> <p class="error-text">Last Name cannot be empty</p> </div> <div class="infield"> <input type="text" placeholder="Email Address" class="input-email"> <img src="./images/icon-error.svg" alt="icon-error" class="error-image"> <p class="error-text">Looks like this is not an email</p> </div> <div class="infield"> <input type="password" placeholder="Password"> <img src="./images/icon-error.svg" alt="icon-error" class="error-image"> <p class="error-text">Password cannot be empty</p> </div> <button type="submit">Claim your free trial</button> <p id="terms">By clicking the button, you are agreeing to our <a href="#">Terms and Services</a></p> </form>