Javascript JS验证后未提交表单

Javascript JS验证后未提交表单,javascript,Javascript,我是Javascript新手,不太知道验证函数是如何处理的。我所做的验证非常有效,但即使输入有效,表单也不会被提交。也许这和语法有关,但我不知道怎么做 这是代码 const form=document.getElementById('form'); const username=document.getElementById('username'); const email=document.getElementById('email'); const message=document.getE

我是Javascript新手,不太知道验证函数是如何处理的。我所做的验证非常有效,但即使输入有效,表单也不会被提交。也许这和语法有关,但我不知道怎么做

这是代码

const form=document.getElementById('form');
const username=document.getElementById('username');
const email=document.getElementById('email');
const message=document.getElementById('message');
表格.addEventListener('submit',(e)=>{
e、 预防默认值();
检查输入();
});
(函数检查输入(){
//从输入中获取值
const usernameValue=username.value.trim();
const emailValue=email.value.trim();
const messageValue=message.value.trim();
//名称验证
如果(usernameValue==''){
setErrorFor(用户名,“名称不能为空”);
}否则{
setSuccessFor(用户名);
}
//电子邮件验证
如果(emailValue==''){
setErrorFor(电子邮件,“电子邮件不能为空”);
}如果(!isEmail(emailValue)){
setErrorFor(电子邮件“电子邮件无效”);
}否则{
setSuccessFor(电子邮件);
}
//消息验证
如果(messageValue==''){
setErrorFor(消息“消息不能为空”);
}否则{
setSuccessFor(消息);
}
//显示成功
//警告(“表单提交成功!”);
})();
(功能setErrorFor(输入,消息){
const formControl=input.parentElement;//.form control
constsmall=formControl.querySelector('small');
//在小标记内添加错误消息
small.innerText=消息;
//添加错误类
formControl.className='form control error';
})();
(功能setSuccessFor(输入){
const formControl=input.parentElement;
formControl.className='form control success';
window.location.href=”http://www.w3schools.com";
})();
(电子邮件){
//检查电子邮件的格式是否正确
//例如:***@gmail.com
常数re=/^([^()[\]\\,;:\s@“]+(\.[^()[\]\,;:\s@“]+)*)(“+”)(\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.]);([a-zA Z-0-9]++];
返回re.test(字符串(email.toLowerCase());
})();
这是表格


姓名:
错误消息
电邮:
错误消息
你想要我的新闻信吗?


好的,谢谢 给我写封信:

错误消息
这就是我要提交的地方:


确认书

 您的姓名:
 您的电子邮件:
 您的信息:
证实
您创建的,这就是它们未定义的原因。你必须把它全部删掉

示例:

function setSuccessFor(input) {
  const formControl = input.parentElement;
  formControl.className = "form-control success";
}
您必须在函数末尾创建一个条件,如果所有字段都已满,该条件将引导您进入页面。

if(username.value&&email.value&&message.value){
window.location.href=”https://www.w3schools.com";
}
const form=document.getElementById(“表单”);
const username=document.getElementById(“用户名”);
const email=document.getElementById(“电子邮件”);
const message=document.getElementById(“消息”);
表格.附录列表(“提交”、(e)=>{
e、 预防默认值();
检查输入();
});
函数checkInputs(){
//从输入中获取值
const usernameValue=username.value.trim();
const emailValue=email.value.trim();
const messageValue=message.value.trim();
//名称验证
如果(usernameValue==“”){
setErrorFor(用户名,“名称不能为空”);
}否则{
setSuccessFor(用户名);
}
//电子邮件验证
如果(emailValue==“”){
setErrorFor(电子邮件,“电子邮件不能为空”);
}如果(!isEmail(emailValue)){
setErrorFor(电子邮件,“电子邮件无效”);
}否则{
setSuccessFor(电子邮件);
}
//消息验证
如果(messageValue==“”){
setErrorFor(消息,“消息不能为空”);
}否则{
setSuccessFor(消息);
}
if(username.value&&email.value&&message.value){
window.location.href=”https://www.w3schools.com";
}
}
函数setErrorFor(输入、消息){
const formControl=input.parentElement;//.form control
constsmall=formControl.querySelector(“小”);
//在小标记内添加错误消息
small.innerText=消息;
//添加错误类
formControl.className=“表单控制错误”;
}
函数setSuccessFor(输入){
const formControl=input.parentElement;
formControl.className=“表单控制成功”;
}
功能电子邮件(电子邮件){
//检查电子邮件的格式是否正确
//例如:***@gmail.com
常数re=/^([^()[\]\\,;:\s@“]+(\.[^()[\]\,;:\s@“]+)*)(“+”)(\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.]);([a-zA Z-0-9]++];
返回re.test(字符串(email.toLowerCase());
}

文件
姓名:
电邮:
你想要我的新闻信吗?


好的,谢谢 给我写封信:


我认为checkInputs需要返回一个布尔值(有效、无效等),否则表单将不会提交。那么在阻止表单后,您将在哪里提交表单?@epascarello我将使用post方法将其发送到另一个php文件。我尝试在没有验证的情况下发送它,但在包含验证的情况下不起作用。您在哪里提交?您取消了表单操作,因此它永远不会提交。您应该只调用
e.preventDefault()如果您不希望它