表单验证未验证

今天我想练习构建表单并使用JavaScript对其进行验证。
这是我的表单代码：表单验证未验证

<form id="practiseForm"> 
    <fieldset id="controls"> 
    <div> 
     <label for="fname">First Name: </label> 
     <input type="text" id="fname"> 
    </div> 
    <div> 
     <label for="lname">Last Name: </label> 
     <input type="text" id="lname"> 
    </div> 

    <div> 
     <label for="email">Email: </label> 
     <input id="email" type="text" size="40"> 
     </div> 
    <div> 
     <input type="submit" value="Submit"> 
    </div> 
    </fieldset>

在Fiddle

我希望能够验证完整的形式，这意味着确保姓氏和名字字段不为空。如果是，那么我想使用alert，最后我想确保用户输入一个有效的电子邮件地址。

我完成了编码，出于某种原因，每当我测试代码时，什么都没有发生，这意味着表单根本就没有验证。所以我想我犯了一些错误，但不太确定，有人能帮我吗？

来源

2014-04-16 Acemi

请在问题中添加JavaScript代码，而不只是在小提琴中。如果不依赖外部网站，问题应该是可读的 – Adam

您需要将验证功能绑定到表单的提交。 – Hatsjoem

@Hatsjoem，谢谢你的提示。 – Acemi

你有一些语法错误+您onsubmit由于某种原因，功能（不是真的需要）里面 - 你应该只使用下面的代替：

document.getElementById("practiseForm").onsubmit = function() { 
    if(document.getElementById("fname").value.trim() === ""){ 
    alert("First Name Field Cannot Be Blank"); 
    return false; 
    } 
    if(document.getElementById("lname").value.trim() === ""){ 
    alert("Last Name Field Cannot Be Blank"); 
    return false; 
    } 
    var email = document.getElementById('email'); 
    var emailRegEx = /[-\w.][email protected]([A-z0-9][-A-z0-9]+\.)+[A-z]{2,4}/; 
    if (!emailRegEx.test(email.value)) { 
    alert("Invalid Email address"); 
    return false; 
    } 
}

与return false;每次更换随机布尔变量，您还应该使用trim()的值，否则带空格的空输入将与您的空案例不匹配。基于@空的答案

jsFiddle here

来源

2014-04-16 18:28:14 lifetimes

非常感谢;） – Acemi

我会接受你的答案作为最终答案。 – Acemi

如果您输入了有效的电子邮件地址，但没有名字/姓氏，您将收到警报，但表格仍然会提交。如果你想防止这种情况，请参阅下面的答案。 – Adam

，但停药表单提交，即使一个有效的电子邮件地址是存在的，但没有姓/名：

document.getElementById("practiseForm").onsubmit = function() { 
    var allowsubmit = true; 
    if(document.getElementById("fname").value.trim() === ""){ 
    alert("First Name Field Cannot Be Blank"); 
    allowsubmit = false; 
    } 
    if(document.getElementById("lname").value.trim() === ""){ 
    alert("Last Name Field Cannot Be Blank"); 
    allowsubmit = false; 
    } 
    var email = document.getElementById('email'); 
    var emailRegEx = /[-\w.][email protected]([A-z0-9][-A-z0-9]+\.)+[A-z]{2,4}/; 
    if (!emailRegEx.test(email.value)) { 
    alert("Invalid Email address"); 
    return false; 
    } 
    if(!allowsubmit){ 
     return false; 
    } 
}

没有神奇到varable称为“允许提交”。您必须检查并返回false（或event.PreventDefault（））以防止提交。另一种解决方案可能是直接返回false而不是设置allowubmit = false - 但是只有第一个错误会通知用户。

JS fiddle

来源

2014-04-16 18:41:33 Adam

表单验证未验证

回答

相关问题