我正在使用JavaScript验证电子邮件。问题是，当电子邮件ID不匹配时，就会出现一个警报按钮。一旦我点击按钮，它仍然会把我带到另一个页面，而不是同一个页面来更正我的邮件id。
HTML:
<label for="department">Email ID</label>
<input type="email" size="30" name="email" id="email" required />
<label for="department">Confirm Email ID</label>
<input type="email" size="30" name="cname" id="confirm_email" required />
<input type="submit" name="submit" value="submit" class="button" onClick="validate()">
JavaScript:
function validate()
{
if(document.getElementById("email").value != document.getElementById("confirm_email").value)
alert("Email do no match");
}
您需要告诉提交按钮不要执行提交
function validate()
{
if (document.getElementById("email").value!=document.getElementById("confirm_email").value) {
alert("Email do no match");
return false;
}
}
问题是因为您采用了按钮类型=提交
更改输入类型="按钮"
<input type="button" name="submit" value="submit" class="button" onClick="validate()">
并使用javascript 提交表单
document.getElementById("myForm").submit();
我认为你只想在提交时验证，然后使用
event.preventDefault();
然后进行验证，但验证成功后，您必须使用js或jq提交表单。JS方法如上所述，jq方法为：
$("form").submit();
如果不需要重定向，则应在if代码块中添加return false;。
提交表单时，浏览器默认会刷新页面。若要阻止此刷新，请添加return false;。
了解更多信息：return|MDN
<html>
<head>
<script>
function validate(){
if(document.getElementById("email").value != document.getElementById("confirm_email").value){
alert("Email do no match");
return false;
}
}
</script>
</head>
<body>
<form action="formsubmit.php" method="post" onsubmit="return validate()">
<label for="department">Email ID</label>
<input type="email" size="30" name="email" id="email" required />
<label for="department">Confirm Email ID</label>
<input type="email" size="30" name="cname" id="confirm_email" required />
<input type="submit" name="submit" value="submit" class="button">
</form>
</body>
</html>
使用下面的javascript代码，您的html代码是正确的！
在StackOverflow Script Runner中执行良好的JavaScript代码将不会运行并发生错误。如果声明了带有电子邮件和confirm_email id的输入框，这应该可以工作
希望它能有所帮助！
function validate(){
if(!document.querySelector("#email").value === document.querySelector("#confirm_email").value){
alert("Email do not match.");
}
}
/* In JavaScript, the ! keyword before the condition belongs to execute the statement if the given condition is false. */如果验证失败，它必须阻止提交表单。所以
return validate();
一定在那里。因此，如果validate函数返回一个false值，那么它将停止要提交的表单。如果validate函数返回true，则将完成提交。
<form method='post' action='action.php'>
<label for="department">Email ID</label>
<input type="email" size="30" name="email" id="email" required />
<label for="department">Confirm Email ID</label>
<input type="email" size="30" name="cname" id="confirm_email" required />
<input type="submit" name="submit" value="submit" class="button" onClick="return validate();">
</form>
<script>
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(email);
}
function validate(){
if(!validateEmail(document.getElementById('email').value))
{
alert('Please enter a valid email');
email.focus();
return false;
}
else if(document.getElementById('email').value!=document.getElementById('confirm_email').value) {
alert('Email Mismatch');
confirm_email.focus();
return false;
}
return true;
}
</script>
修复此问题并移除type=submit并使用函数或使用以下代码：
<script>
function check(){
//* Also add a id "submit" to submit button*//
document.querySelector("#submit").addEventListener("click", function(){
//* Perform your actions when that submit button will be clicked and close with this in next line*//
})</script>