我试图验证一个表单与多个函数，但它只调用最后一个，即使我将它们与逗号结合

Question

我在验证表单时遇到问题。当它提交时，它只运行最后一个函数。当我试着用逗号把它们组合起来时，它就会连续地运行它们。下面是我的代码:

<script type= "text/javascript">
function validateForm() {
  var x = document.forms["myForm"]["name"].value;
  if (x == null || x == "") {
    alert("Name must be filled out");
    return false;
  }
}
function validateForm() {
  var x = document.forms["myForm"]["email"].value;
  var atpos = x.indexOf("@");
  var dotpos = x.lastIndexOf(".");
  if (atpos< 1 || dotpos<atpos+2 || dotpos+2>=x.length) {
    alert("Not a valid e-mail address");
    return false;
  }
}
function validateForm() {
  var x = document.forms["myForm"]["message"].value;
  if (x == null || x == "") {
    alert("Please Send Us a Message");
  return false;
  }
}
</script>

Answer 1

JavaScript不处理重声明同名函数。

function validateForm() {
    // x is a bad name for the variable.
    var x = document.forms["myForm"]["name"].value;
    // x can never be null, BTW.
    if (x === "") {
        alert("Name must be filled out");
        return false;
    }
    x = document.forms["myForm"]["email"].value;
    var atpos = x.indexOf("@");
    var dotpos = x.lastIndexOf(".");
    if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {
        alert("Not a valid e-mail address");
        return false;
    }
    x = document.forms["myForm"]["message"].value;
    if (x === "") {
        alert("Please Send Us a Message");
        return false;
    }
}

Answer 2

不要用相同的名字命名函数!您可以称它们为validateName, validateEmail和validateMessage。

当声明同名函数时，前面的函数将被最后一个函数覆盖。

如果您想调用onsubmit中的一个函数，可以设置onsubmit=validteForm()并声明validateForm为:

function validateForm() {
    validateName();
    validateEmail();
    validateMessage();
}

Answer 3

您试图在一个变量中包含多个值，这是不可能的。您正在定义的值将覆盖已经存在的定义。修改函数名

Do it like bellow

<script>
    function fun1 () {
        alert('in first')
    }
    function fun2 () {
        alert('in Second')
    }
    function fun3 () {
        alert('in third')
    }
</script>

称它们为

形式的onsubmit

<form action="" onsubmit="fun1();fun2();fun3();">
    <input type="submit" value="click">
</form>

Answer 4

另一个解决方案;您可以将函数修改为简单的函数，如

所示

function validateForm(){
  var x, atpos, dotpos;
  x = document.forms["myForm"]["name"].value;
  if(!x){
    alert("Name must be filled out");
    return false;
  }
  x = document.forms["myForm"]["email"].value;
  atpos = x.indexOf("@");
  dotpos = x.lastIndexOf(".");
  if(atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length){
    alert("Not a valid e-mail address");
    return false;
  }
  x = document.forms["myForm"]["message"].value;
  if(!x){
    alert("Please Send Us a Message");
    return false;
  }
  return true;
}