【发布时间】：2022-01-03 15:30:10
【问题描述】：
此代码仅适用于空电子邮件输入，但不适用于无效电子邮件。我想为每个问题显示不同的错误文本。是否可以使用香草 javascript 来做到这一点？还是我的 javascript 代码有问题？
我尚未添加无效电子邮件输入的错误文本。请帮忙。提前致谢。
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>【问题讨论】：
-
也许this library可以帮助你？
标签： javascript html email-validation