我在js中进行表单验证存在问题。验证有效，因为他向我显示了输入字段为空还是有错误。问题是我无法提交，就像js停止提交一样，所有输入字段都是正确的。我不知道为什么我不能提交，所有字段都是绿色的，因为它们是正确的，但是我不能提交。请帮助我，我认为问题是e.preventdefault（）;。线
这是我的js代码
$(document).ready(function() {
const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');
form.addEventListener('submit', e => {
e.preventDefault();
checkInputs();
});
});
function checkInputs() {
// trim to remove the whitespaces
const usernameValue = username.value.trim();
const emailValue = email.value.trim();
const passwordValue = password.value.trim();
const password2Value = password2.value.trim();
if(usernameValue === '') {
setErrorFor(username, 'Inserisci un username');
} else {
setSuccessFor(username);
}
if(emailValue === '') {
setErrorFor(email, 'Inserisci una e-mail');
} else if (!isEmail(emailValue)) {
setErrorFor(email, 'E-mail non valida');
} else {
setSuccessFor(email);
}
if(passwordValue === '') {
setErrorFor(password, 'Inserisci una password');
} else {
setSuccessFor(password);
}
if(password2Value === '') {
setErrorFor(password2, 'Conferma la password');
} else if(passwordValue !== password2Value) {
setErrorFor(password2, 'Le password non corrispondono');
} else{
setSuccessFor(password2);
}
}
function setErrorFor(input, message) {
const formControl = input.parentElement;
const small = formControl.querySelector('small');
formControl.className = 'form-control error';
small.innerText = message;
}
function setSuccessFor(input) {
const formControl = input.parentElement;
formControl.className = 'form-control success';
}
function isEmail(email) {
return /^(([^<>()\[\]\\.,;:\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,}))$/.test(email);
}
这是HTML
<!DOCTYPE HTML>
<html>
<head>
<?php include("top.php");?>
<link href="style/index.css" type="text/css" rel="stylesheet">
<script src="js/script1.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="header">
<h2>Registrati</h2>
</div>
<form id="form" class="form" action="usr/signup_submit.php" method="post">
<div class="form-control">
<label for="username">Username</label>
<input type="text" name="username" placeholder="Username" id="username">
<small>Error message</small>
</div>
<div class="form-control">
<label for="username">Email</label>
<input type="email" name="email" placeholder="E-mail" id="email">
<small>Error message</small>
</div>
<div class="form-control">
<label for="username">Password</label>
<input type="password" name="password" placeholder="Password" id="password">
<small>Error message</small>
</div>
<div class="form-control">
<label for="username">Conferma password</label>
<input type="password" name="password2" placeholder="Conferma password" id="password2">
<small>Error message</small>
</div>
<div><input type="submit" value="Registrati"></div>
<div id = "reg">Hai un account? <a href = "index.php">Accedi</a></div>
</form>
</div>
</body>
</html>
在您的“ checkInputs”函数中添加状态，并根据您所进行的验证将其值更改为“ true”或“ false”。
$(document).ready(function() {
const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');
form.addEventListener('submit', e => {
if(!checkInputs()){
e.preventDefault();
}
});
});
function checkInputs() {
// trim to remove the whitespaces
let status = false; //Add status default false
const usernameValue = username.value.trim();
const emailValue = email.value.trim();
const passwordValue = password.value.trim();
const password2Value = password2.value.trim();
if(usernameValue === '') {
status = setErrorFor(username, 'Inserisci un username');
//if not validating then "false"
} else {
status = setSuccessFor(username);
//if validating then "true"
}
if(emailValue === '') {
status = setErrorFor(email, 'Inserisci una e-mail');
} else if (!isEmail(emailValue)) {
status = setErrorFor(email, 'E-mail non valida');
} else {
status = setSuccessFor(email);
}
if(passwordValue === '') {
status = setErrorFor(password, 'Inserisci una password');
} else {
status = setSuccessFor(password);
}
if(password2Value === '') {
status = setErrorFor(password2, 'Conferma la password');
} else if(passwordValue !== password2Value) {
status = setErrorFor(password2, 'Le password non corrispondono');
} else{
status = setSuccessFor(password2);
}
return status;
}
function setErrorFor(input, message) {
const formControl = input.parentElement;
const small = formControl.querySelector('small');
formControl.className = 'form-control error';
small.innerText = message;
return false;
}
function setSuccessFor(input) {
const formControl = input.parentElement;
formControl.className = 'form-control success';
return true;
}
function isEmail(email) {
return /^(([^<>()\[\]\\.,;:\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,}))$/.test(email);
}
检查工作示例
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句