Javascript文本字段验证

Question

我在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;

Answer 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;
 }
}

Answer 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>

Answer 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的检查，以确保它存在且不为null（防止空引用错误）。
在if语句中，您需要检查字段的value属性，而不是字段本身。 在你的旧代码中，如果它是空白的，那么该字段应该在那里并且总是返回true。
我将比较更改为使用===而不是== 。 使用== ，如果值为“false”或0，则返回true。 请参阅“ JavaScript中==和===之间的差异 ”。
您在alert语句末尾错过了分号。
如果身体if有结束return ，那么你并不需要一个else块。 减少代码量（下载速度更快）并使其更易于阅读。

Javascript文本字段验证

问题描述

3 个解决方案

解决方案1
3 2012-09-30 17:55:04

解决方案2
2 已采纳 2012-09-30 17:55:47

解决方案3
-1 2012-09-30 18:19:37

Javascript文本字段验证

问题描述

3 个解决方案

解决方案1 3 2012-09-30 17:55:04

解决方案2 2 已采纳 2012-09-30 17:55:47

解决方案3 -1 2012-09-30 18:19:37

解决方案1
3 2012-09-30 17:55:04

解决方案2
2 已采纳 2012-09-30 17:55:47

解决方案3
-1 2012-09-30 18:19:37