我写了一个非常简单的javascript表单验证脚本:
function validateForm(){
var x=document.forms["contactForm"]["firstname"].value;
if (x==null || x==""){
return false;
}
var y=document.forms["contactForm"]["lastname"].value;
if (y==null || y==""){
return false;
}
var z=document.forms["contactForm"]["emailaddress"].value;
var atpos=z.indexOf("@");
var dotpos=z.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=z.length){
return false;
}
var msg_area = document.getElementById("message");
msg_area.innerHTML = "";
if (document.getElementById("message").value.length < 20) {
return false;
}
else document.getElementById("contactForm").submit();
}
它应该验证此表单:
<form name="contactForm" onsubmit="return validateForm()" action="./thankyou.html" method="post">
<label for="firstName">First Name <sup>*</sup></label>
<input name ="firstname" id="firstName" type="text" placeholder="First Name" required />
<label for="lastName">Last Name <sup>*</sup></label>
<input name ="lastname" id="lastName" type="text" name="lastName" placeholder="Last Name" required />
<label for="emailaddress">Email address <sup>*</sup></label>
<input name="emailaddress" id="emailAddress" type="email" placeholder="something@example.com" required />
<label for="message">Message<sup>*</sup></label>
<textarea id="message" placeholder="Remember, be nice!" required></textarea>
<input type="submit" name="submit" value="Email Me!" class="emailsub" />
<p class="small"><sup>*</sup> denotes a required field.</p>
</form>
当它被提交时,它似乎根本没有真正调用javascript。它唯一寻找的是它满足 html 的"必需"部分。我对javascript很陌生,所以问题所在可能很明显,但我自己找不到它。
任何帮助都非常感谢!
p.s. 这是针对本地网站的,因此 action=" 转到另一个 html 而不是页面来处理消息。这可能是这里的问题吗?
html5 "required" 属性告诉浏览器在继续之前进行验证,请在此处阅读更多内容。这意味着它会在调用 javascript 函数之前停止事件(在支持的浏览器上),除非它通过基本验证(必填字段和电子邮件)。
如果您希望javascript执行并执行自己的验证,则需要删除"required"属性。您也可以尝试更复杂的 html 表单验证。这是一篇关于这个主题的好文章。