我有一个简单的登录表单,其中包含用于前端验证的绝对基础知识。它只检查字段是否为空,并且电子邮件是最基本的正确格式。当表单无效时,我会阻止submit
行为。
当我在两个字段中输入内容以使它们不是空白,但电子邮件仍然无效时,表单未提交,但浏览器仍然提示我保存我的凭据。
如果表单无效且尚未提交,我该如何防止这种情况发生?我仍然希望向用户提供此功能,但仅限于实际提交表单时。
以下是我如何设置的基础知识:
HTML:
<form method="post" action="" onsubmit="return validateForm()" novalidate>
<input type="text" id="email" required autofocus>
<input type="password" id="password" required>
</form>
JS:
function validateForm() {
var isValid = true;
//validation logic goes here...
return isValid;
}
这是一个有效的演示:https://codepen.io/chrismbarr/pen/awmVyq 在密码字段中输入无效的电子邮件和内容以触发此操作。