Javascript 文本字段验证答案

【问题标题】：Javascript text field validationJavascript 文本字段验证
【发布时间】：2012-09-30 17:52:49
【问题描述】：

我在验证 javascript 中的表单时遇到了困难。我目前只检查一个文本字段，但它不起作用。我的代码如下：

index.html:

<html xmlns = "http://www.w3.org/1999/xhtml">
<head> 
    <title>
        Validation Form
    </title>
    <script type = "text/javascript" src ="vForm.js">
    </script>
</head>
<body>
    <form id = "myForm" action ="">
        First name: <input type="text" name="fname"></br>
        Last name: <input type="text" name="lname"></br>
        Password: <input type="password" name="pass1"></br>
        Re-enter password: <input type="password" name="pass2"></br>
        Email: <input type="text" name="email"></br>
        Phone: <input type="text" name="phone"></br>
        Address: <input type="text" name="add"></br>
        Date: <input type="date" name="date"></br>
        Time: <input type="time" name="time"></br>
        <input type="reset" name="reset">
        <input type="submit" name="submit">
    </form>
    <script type = "text/javascript" src ="vFormRun.js">
    </script>
</body>
</html>

vForm.js：

function validateForm()
{
    var fname = document.getElementById("fname");
    var lname = document.getElementById("lname");
    var pass1 = document.getElementById("pass1");
    var pass2 = document.getElementById("pass2");
    var email = document.getElementById("email");

    if(fname == "")
    {
        alert("Please enter first name")
        return false;
    }
    else
    {
        return true;
    }
}

vFormRun.js：

document.getElementById("myForm").onsubmit = validateForm;

【问题讨论】：

基本的javascript。错过了.value。
离题：您没有指定是否也在服务器端验证数据，但如果您不是，请注意用户可以绕过 JS 验证：它可能会有所帮助，但不应该被认为是安全的。在服务器端也验证相同的数据。
The homework tag is now officially deprecated
这是一个很好的例子，说明调试（通过 Firebug 或 Chrome 等中的等效工具）将非常有用。在var fname = ...之后的行上放一个断点，你会看到元素有一个property叫做value，里面有正确的东西。学习它，省去很多精力。
@RASG 正确，应该是：var fname = document.getElementById("fname").value; var lname = document.getElementById("lname").value; var pass1 = document.getElementById("pass1").value; var pass2 = document.getElementById("pass2").value; var email = document.getElementById("email").value;

标签： javascript html

【解决方案1】：

您需要为每个人提供.value。另外，给id 相同的name。

function validateForm()
{
 var fname = document.getElementById("fname");
 var lname = document.getElementById("lname");
 var pass1 = document.getElementById("pass1");
 var pass2 = document.getElementById("pass2");
 var email = document.getElementById("email");

 if(fname.value == "")
 {
   alert("Please enter first name")
   return false;
 }
 else
 {
   return true;
 }
}

【讨论】：

【解决方案2】：

document.getElementById("fname");

只有当你有一个 ID 为 fname 的元素时才有效，而你没有。

您可以像这样将 ID 属性设置为元素：

<input type="text" name="fname" id="fname">

或者，您可以像这样引用表单元素：

var fname = document.forms["myForm"]["fname"]

那么你想在比较的时候得到它的value属性。

fname.value

<br> 标签是自闭合的，所以它应该是<br /> 而不是</br>

【讨论】：

不过，不要让人们对你投反对票！ :P 检查你的答案，它不正确。我不明白哪个文盲支持你。 ;) 你犯了和 OP 一样的错误... :)
这里不需要点名。
@PraveenKumar 但他们确实指出了一些重要的事情 - 元素需要一个 id 属性才能正常工作！不过，正如大家所指出的，该功能需要使用.value。

【解决方案3】：

这里是解决方案...

function validateForm(form) {
    var fname = form.fname,
        lname = form.lname,
        pass1 = form.pass1,
        pass2 = form.pass2,
        email = form.email;

    if(fname && fname.value === "") {
        alert("Please enter first name");
        document.getElementById('result').innerHTML = 'Invalid';
        return false;
    }
    document.getElementById('result').innerHTML = 'Passed';
    return true;
}

<form id="myForm" action="" onsubmit="validateForm(this)">
    First name: <input type="text" name="fname"><br/>
    Last name: <input type="text" name="lname"><br/>
    Password: <input type="password" name="pass1"><br/>
    Re-enter password: <input type="password" name="pass2"><br/>
    Email: <input type="text" name="email"><br/>
    Phone: <input type="text" name="phone"><br/>
    Address: <input type="text" name="add"><br/>
    Date: <input type="date" name="date"><br/>
    Time: <input type="time" name="time"><br/>
    <input type="reset" name="reset">
    <input type="submit" name="submit">
  <p id="result">
  </p>
</form>

我在这里纠正了一些问题。

我将所有var 声明更改为使用一个var 声明。这是最佳做法。
在 if 语句中，我添加了对变量 fname 的检查，以确保它存在且不为空（防止空引用错误）。
在 if 语句中，您需要检查字段的 value 属性，而不是字段本身。在您的旧代码中，如果该字段为空，则该字段应该存在并且始终返回 true。
我将比较更改为使用=== 而不是==。使用== 时，如果值为“false”或0，它将返回true。请参阅“Difference between == and === in JavaScript”。
alert 语句末尾缺少分号。
如果if 的主体以return 结尾，则不需要else 块。减少代码量（下载速度更快）并使其更易于阅读。

【讨论】：

投反对票的是什么？如果答案有问题，我想知道（通过评论），以便每个人都能从更好的答案中受益。
可能是因为你错过了一个明显的：表单中没有任何元素有任何 ID，所以你不能做getElementById。您的所有其他积分均有效。
@sachleen ，您能否验证我对示例所做的更改现在是否可以正常工作？