Javascript JS表单验证的逻辑

假设我有两种形式，firstName和lastName

我有一个字母数字验证方法，我单独测试过

   function alphaNumericValidation(Name)
   {
     if(/[^a-zA-Z0-9]/.test(firstName.value) || firstName.value == "") 
     {
       Name.style.border = "1px solid red";
       Name.focus();
       return false;
    }
    return true;
   }

现在，我有一个验证方法，代码提交给：

 <td><input type="submit" name="smbt" id="smbt" value="Next" class="nextBtn" onclick="return validation();"/></td>

然而，逻辑是错误的，它并没有按预期的那样工作。我做错了什么？

试试这个：

function alphaNumericValidation(Name) {
  if(/[^a-zA-Z0-9]/.test(Name.value) || Name.value == "") {
    Name.style.border = "1px solid red";
    Name.focus();
    return false;
  }
  return true;
}

您在

字母数字验证

中测试

名字

，当您将

名字

（或

姓氏

）作为

名字

参数传递给

字母数字验证

时，它应该在那里

编辑

如果只有

firstName

有效且

lastName

无效，则

validation（）

函数不会返回任何内容

function validation() {
  var firstName = document.getElementById("firstName");
  var lastName = document.getElementById("lastName");

  if (alphaNumericValidation(firstName)) {
    if (alphaNumericValidation(lastName)) {
      return true;
    }
  // <-- When it gets to here, nothing is returned.. you could add `return false;` here to fix it.
  }
  else
    return false;

编辑2

您可以继续将if语句放在if语句中，只要确保函数始终返回某些内容，就可以正常工作

在你的情况下，我可能会这样写：

function validation() {

  var firstName = document.getElementById("firstName");
  var lastName = document.getElementById("lastName");

  var valid = true;

  valid = valid ? alphaNumericValidation(firstName) : false;
  valid = valid ? alphaNumericValidation(lastName) : false;

  return valid;

}

---

这将继续运行您的验证，直到其中一个返回

false

，然后它将跳过之后的验证，

validation（）

将返回

false
哦，对不起，我已经修复了此错误。我遇到的问题是它的边框正确，但即使表单返回false并失败，它也会提交。我认为这是我的第一次尝试，因为这是最符合逻辑的尝试，但失败了..但我想那是我的alphavalidation函数被破坏的时候。。非常感谢。还有一个问题是，如果我想添加更多验证，我是否必须继续使用AND for everything，或者是否有一种更简单的方法来做到这一点？了解它以何种方式不“按预期”工作会很有趣。您是否收到任何错误消息？你用还是用？在这些工具的帮助下，这样的事情应该很容易弄明白。例如，如果我为“lastName”输入了无效的输入，它会按预期工作。但是，如果我为“lastName”输入了无效的输入，为“firstName”输入了有效的输入，它会提交到下一页。现在我将查看devtools。。
if (alphaNumericValidation(firstName) && alphaNumericValidation(lastName)) {
  return true;
}
else
  return false;

function validation() {

  var firstName = document.getElementById("firstName");
  var lastName = document.getElementById("lastName");

  var valid = true;

  valid = valid ? alphaNumericValidation(firstName) : false;
  valid = valid ? alphaNumericValidation(lastName) : false;

  return valid;

}