单击提交按钮时未完成验证

Question

<script>
function ValidateEmail(){
    var emailID = document.getElementById("email").value;
	var email = document.getElementById("email");
	var emailRegexp=/^[a-z]+\w+([\.-]?\w+)*@[a-z]+\w+([\.-]?\w+)*(\.[a-z]{2,3})+$/i;

    if ((emailID==null)||(emailID=="")){
      //  alert("Please Enter your Email ID");
		email.style.borderColor="red";
		document.getElementById("err").innerHTML = "Please Enter your Email ID";
        emailID.focus();
        return false;
    }
	else
 if (!emailRegexp.test(emailID)){
	//alert("Please Enter valid Email ID");
	email.style.borderColor="red";
	document.getElementById("err").innerHTML = "Please Enter valid Email ID";
	emailID.focus();
return false;
	}
	else
	{
		email.style.borderColor="#e1e1e1";
		document.getElementById("err").innerHTML ="";
		return true;
	}

 }

 function validUsername()
{
	var error = "";
	var illegalChars = /\W/; // No special Characters allowed
	var fd =document.getElementById("name");

	if (fd.value == "" || fd.value == null)
	{
		fd.style.borderColor = 'Red';
		document.getElementById("UserErr").innerHTML = " Field is left Blank.\n";
		return false;
	}
	else if ((fd.value.length < 5) || (fd.value.length > 20)) // Number of Character entered is checked
	{
		fd.style.borderColor = 'Red';
		document.getElementById("UserErr").innerHTML = "Username is should be in a range of 5 and 15..\n";
		return false;
	}
	else if (illegalChars.test(fd.value)) // check for illegal characters
	{
		fd.style.borderColor = 'Red';
		document.getElementById("UserErr").innerHTML = "Illegal Characters not allowed\n";
		return false;
	} 
	else
	{
		fd.style.borderColor = '#e1e1e1';
		document.getElementById("UserErr").innerHTML = "";
		return true;
	}
}

function validPassword()
{
	var error = "";
	var password=document.getElementById("pass");
	var passError=document.getElementById("PassErr");
	var illegalChars = /[\W_]/; // Numbers and letter only
	var checkPass=/\w*[a-z]+\d+\w*/i;

	if (password.value == "" || password.value == null)
	{
		password.style.borderColor = 'Red';
		passError.innerHTML = "Field Cannot be blank.\n";
		return false;
	}
	else if ((password.value.length < 8) || (password.value.length > 20)) // Checks length of the password
	{
		password.style.borderColor = 'Red';
		passError.innerHTML = "Length should be in Range of 8 to 20. \n";
		return false;
	}
	else if (illegalChars.test(password.value))
	{
		password.style.borderColor = 'Red';
		passError.innerHTML = "Illegal characters not allowed.\n";
		return false;
	}
	else if (!checkPass.test(password.value)) // Checks for numeric value  in entered password
	{
		password.style.borderColor = 'Red';
		passError.innerHTML = "Atleast one Numeric value Required ";
		return false;
	}
	else 
	{
		password.style.borderColor = '#e1e1e1';
		passError.innerHTML = "";
		return true;
	}
}

function validateOnSubmit()
{
	if(ValidateEmail() && validUsername() && validPassword());
		return true;
		
		return false;
}
</script>

<form method="post" name="form">
<!--<input type="text" name="email" id="email" placeholder="Your Email" onblur="return ValidateEmail()"/><span id="err"></span></td>-->
<table align="center" width="30%" border="0">
<tr>
<td><input type="text" name="uname" id="name" placeholder="User Name" onblur="validUsername()"/><span id="UserErr" style="color:red"></span></td>
</tr>
<tr>
<td><input type="text" name="email" id="email" placeholder="Your Email" onblur="ValidateEmail()"/><span id="err"></span></td>
</tr>
<tr>
<td><input type="password" name="pass" id="pass" placeholder="Your Password" onblur="validPassword()" /><span id="PassErr" style="color:red"></span></td>
</tr>
<tr>
<td><button type="submit" onsubmit="return validateOnSubmit()" name="btn-signup">Sign Me Up</button></td>
</tr>
</table>
</form>

我已经创建了注册表单并在 JavaScript 中为输入字段创建了验证。

onBlur 验证已完成，并且工作正常。

但是当我点击“注册我”按钮时，验证没有完成，数据被插入到数据库中。请问我需要帮助。

Answer 1

submit 事件在表单上触发，而不是提交按钮。将onsubmit 属性移动到<form> 开始标记。

Answer 2

"emailID.focus();" 错误在 ValidateEmail() 函数中。而不是它 “email.focus(); 是对的。 现在它可以正常工作了。

但我不需要这个，所以我删除了它。