Question

我很感激我正在努力的这种形式的一些帮助。表格本身很好;但是验证可以让任何事情通过。当我故意违反验证功能中的每一个条件时（或者在一起，如果我在我的回报中混淆了“true”和“false”，这看起来我没有），当我应该得到时，绝对没有任何反应警告和表格应该被阻止提交。

更新：我的第一个问题已经解决，我相应更新，在破坏脚本的区域留下评论。我仍然会欣赏缩短脚本的方法。另外，我有一个新问题。我试图使用regEx来防止用户输入非字母和非空白字符;但是，我的代码忽略了短语Jas@n X，这也引起了我的注意，我还需要更多的代码来阻止人们输入他们的首字母（无论是第一个，最后一个还是两个）。感觉问题出在.test(name)。

<html>
 <head>
  <script type="text/javascript" src="jquery.js"></script>
  <script>
   function validateForm() {
    var x = document.forms["Involved"]["name"].value;
    if (!x) { //Here I now want to eliminate the possibility of ints or special characters. Preferably I have alternate error messages when a special/int is entered
     alert("Please enter your full name");
     return false;
    }
    if (/[^a-zA-Z\s:]+/.test(name)) {
     alert("Please refrain from using non-alphabetical characters.");
     return false;
    }
    if (!/[A-Z][a-z]+\s[A-Z][a-z]+/.test(name)) {
     alert("Please enter a real name.")
     return false;
    }
    if (x.split(" ").length < 2) { // I misplaced parentheses here, making it "else if ((x.split " ".length < 2)) {", which broke the script. 
     alert("Please enter your first name as well as your last name.");
     return false;
    }
    var y = document.forms["Involved"]["email"].value;
    if (!y) {
     alert("Please enter an email address.");
     return false;
    }
    var atpos = y.indexOf("@");
    var dotpos = y.lastIndexOf(".");
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=y.length) {
     alert("Please enter a valid email address.");
     return false;
    }
    var z = document.forms["Involved"]["help"].value;
    if (!z) {
     alert("Please let us know how you intend to help.");
     return false;
    }
    return true;
   }
  </script>
 </head>
 <body>
  <form name="Involved" method="post" action="" onsubmit="return validateForm();">
   Name: <br><input type="text" name="name" title="Your full name" style="color:#888" placeholder="Enter full name"/>
   <br><br>
   Email: <br><input type="text" name="email" title="Your email address" style="color:#888" placeholder="Enter email address"/>
   <br><br>
   How you can help: <br><textarea cols="18" rows="3" name="help" title="Service you want to provide" style="color:#888" placeholder="Please let us know of any ways you may be of assistance"></textarea>
   <br><br>
   <input type="submit" value="Submit" id=submitbox"/>
  </form>
 </body>
<html>

Answer 1

此行中有javascript错误，如果您在浏览器中打开开发人员工具，则可以看到它：

else if ((x.split " ".length < 2)) {
// Uncaught SyntaxError: Unexpected string

错误的括号放置，应该是

else if (x.split(" ").length < 2) {

您可以对代码执行的其他修改：

如果您真的不需要，请不要包含jQuery库：

<script type="text/javascript" src="jquery.js"></script>

你不应该使用javascript填充默认输入值，有很好的HTML5属性placeholder，所以你可以使用它来改变你的输入：

<input type="text" name="name" title="Your full name" style="color:#888" value="Enter full name" onfocus="inputFocus(this)" onblur="inputBlur(this)" />

只是这个：

<input type="text" name="name" title="Your full name" placeholder="Enter full name"/>

对于一般的javascript代码：如果return语句为真时if，则可以继续编写else代码而不将其包含在else语句中，例：

function check() {
    var a = 1;

    if (a != 2) {
        return false;
    }
    else {
        if (a != 3) {
            return false;
        }
        else {
            return true;
        }
    }
}

可以更改为更具可读性：

function check() {
    var a = 1;

    if (a != 2) {
        return false;
    }

    if (a != 3) {
        return false;
    }

    return true;
}

Answer 2

问题出在这里（它可能是一个错字）。在此处拆分后您缺少大括号：

else if ((x.split " ".length < 2))

相反，你应该写x.split(" ") 你也不需要在这里使用双括号（它不会阻止代码工作）。

其他建议：您可以在此使用if (varName)代替if (varName == null || varName == "" )。

此外，也许它过多，但是因为你说你是js的新手：如果某些东西没有按预期工作，那么查看浏览器控制台总是有帮助的。有一个例外，它出现了很多行，这就是我发现错误的方法。

用于表单验证的JS函数

2 个答案: