Question

我必须在我的网页上填写表单，其中一个表单name="login"，另一个表单name="register"（下面的代码）。如果提交时输入字段为空，我会使用javascript作为警报当我在网页上只有一个表单时它运行良好，但是当我添加另一个表单时问题就开始了。它适用于第一个表单（登录），但是当我填写并提交第二个表单时，它会警告字段为空。（据说，因为登录字段为空）造成这种情况的原因是什么？如何解决这个问题？

HTML

<form method="post" action="" name="login" onSubmit="return valid();">
        <label for="username">Username:</label><br>
        <input type="text" name="username"><br>
        <label for="password">Password:</label><br>
        <input type="password" name="password"><br>
        <button type="submit" name="signin">Log inn</button>
</form>

<form method="post" action="index.php" name="register" onSubmit="return valid();">
        <label for="username">Username:</label><br>
        <input type="text" name="username"><br>
        <label for="email">E-mail adress:</label><br>
        <input type="text" name="email"><br>
        <label for="password">Password:</label><br>
        <input type="password" name="password"><br>
        <button type="submit" name="signup">Registrer deg</button>
</form>

脚本

<script type="text/javascript">
function valid()
  {
  if(document.login.username.value == "")
  {
  alert ("Please enter your username.")
  document.login.username.focus();
  return false;
  }
  if(document.login.password.value == "")
  {
  alert ("Please enter your password.")
  document.login.password.focus();
  return false;
  }
  }
</script>

<script type="text/javascript">
function valid()
  {
  if(document.register.username.value == "")
  {
  alert ("Please enter your username.")
  document.register.username.focus();
  return false;
  }
  if(document.register.email.value == "")
  {
  alert ("Please enter your e-mail adress.")
  document.register.email.focus();
  return false;
  }
  if(document.register.password.value == "")
  {
  alert ("Please enter your password.")
  document.register.password.focus();
  return false;
}
}
</script>

Answer 1

您正在定义两个具有相同名称的独立函数，它们会相互覆盖。制作两个单独的函数validateLogin和validateRegister

<form method="post" action="" name="login" onSubmit="return validateLogin();"> ... 
<form method="post" action="" name="login" onSubmit="return validateRegister();">

您的代码略有改进，是您将表单传递给处理程序，因此它会缩短您的代码并使用更少的全局变量

<form method="post" action="" name="login" onSubmit="return validateLogin(this);"> ..

function validateLogin(form)
{
  if(form.username.value == "")
  {
    alert ("Please enter your username.")
    form.username.focus();
    return false;
  }
  if(form.password.value == "")
  {
    alert ("Please enter your password.")
    form.password.focus();
    return false;
  }
}

更好的是，通过JS而不是HTML来连接处理程序

//After the HTML is loaded, and give your form an ID
document.getElementById('loginForm').addEventListener('submit', function(e){
    // In IE, the event is global
    e = e || window.event;
    // "this" points to the form
    if(this.username.value == "") {
        alert ("Please enter your username.")
        this.username.focus();
        return false; //  or e.preventDefault();
    }
    if(this.password.value == "") {
        alert ("Please enter your password.")
        this.password.focus();
        return false; //  or e.preventDefault();
    }
});

最后但并非最不重要的是，您可以抽象检查空值的工作，这样您的两个函数就不会做同样的工作。

function createValidator(formId, validations) {
    var form = document.getElementById(formId);
    form.addEventListener('submit', function(e){
        e = e || window.event;
        for (var i=0; i < validations.length; i++) {
            var elementName = validations[i].elName;
            var errorMessage = validations[i].error; 
            if (form[elementName].value === "") {
                alert(errorMessage);
                return false; // or e.preventDefault()
            }
        }            
    });
}

// And set up both your handlers, remember to give your forms and ID
createValidator('formLogin', [{
    elName: 'username',
    error: 'Please enter your username'
}, {
    elName: 'password',
    error: 'Please enter your Password'
}]);

createValidator('formRegister', [{
    elName: 'username',
    error: 'Please enter your username'
},{
    elName: 'email',
    error: 'Please enter your email address'
},{
    elName: 'password',
    error: 'Please enter your Password'
}]);

Javascript - 脚本仅适用于一个元素

1 个答案: