javascript - 为什么当 onsubmit = false 使用外部 javascript 时 Firefox 5 将表单发送到服务器?

标签 javascript forms validation

我有一个想要验证的表单,如下所示:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="scripts/validate.js"></script>
</head>
<body>
<form name="frmRegister" method="post" action="register.aspx"  onsubmit="return validate(this);">
    <div>
      <label for="txtUsername">Username:</label>
      <input type="text" name="txtUserName" id="txtUserName" size="12" />
    </div>
    <div>
      <label for="txtPassword">Password: </td></label>
      <input type="password" name="txtPassword" id="txtPassword" size="12" />
    </div>
    <div>
      <label for="txtPassword2">Confirm your password:</label>
      <input type="password" name="txtPassword2" id="txtPassword2" size="12" />
    </div>
    <div>
      <input type="submit" value="Log in"  />
    </div>
</form>
</body>
</html>

以及名为 validate 的外部文件中的验证函数,如下所示:

function validate(form) {
  var returnValue = true;
  var username = form.txtUserName.value;
  var password1 = form.txtPassword.value;
  var password2 = form.txtPassword2.value;

if(username.length < 6) {
  returnValue = false;
  alert("Your username must be at least\n6 characters long.\nPlease try again.");
  frmRegister.txtUserName.focus();
}

if (password1.length < 6) {
  returnValue = false;
  alert("Your password must be at least\n6 characters long.\nPlease try again.");
  frmRegister.txtPassword.value = "";
  frmRegister.txtPassword2.value = "";
  frmRegister.txtPassword.focus();
}

if (password1 != password2) {
  returnValue = false;
  alert("Your password entries did not match.\nPlease try again.");
  frmRegister.txtPassword.value = "";
  frmRegister.txtPassword2.value = "";
  frmRegister.txtPassword.focus();
}
  return returnValue;
}

但是 Firefox 5 不断将其发送到 register.aspx,即使该表单未通过测试?

最佳答案

您尚未定义frmRegister

Internet Explorer 将为每个具有 id 的元素(以及一些具有名称的元素)生成一个全局变量(具体取决于 IIRC、版本以及您是否处于怪异模式)。其他浏览器不会。

当您尝试以下操作时:

frmRegister.txtPassword.value = "";

浏览器会出错,因为 frmRegister未定义,因此无法拥有 .txtPassword

当它出错时,脚本就会终止并且永远不会到达return语句。

由于从未达到return,因此不会取消提交,并且表单会正常发送到服务器。

关于javascript - 为什么当 onsubmit = false 使用外部 javascript 时 Firefox 5 将表单发送到服务器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6691411/

相关文章:

javascript - 我如何用 {} 替换 {

javascript - 不能将 forEach 与文件列表一起使用

spring-boot - 将 @Future 和 LocalDate 的自定义 ConstraintValidator 添加到 Spring Boot 项目

java - log4j配置文件错误检测

javascript - Postman 环境变量返回 null

javascript - 通过ajax存储数据然后访问该URL

javascript - 创建动态表单元素时没有 POST 数据

javascript - 带有两个提交按钮的 Angular 模态在 "enter"上触发

reactjs - React 和 TypeScript 中的表单,带有 DRY 更改句柄

android - Edittext 表单验证