Javascript文本字段验证_Javascript_Html

Javascript文本字段验证

javascript html

Javascript文本字段验证,javascript,html,Javascript,Html,我在用javascript验证表单时遇到困难。我目前只检查一个文本字段，但它不起作用。我的代码如下： index.html： <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> Validation Form </title> <script type = "text/javascript" src ="vForm.js">

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

vFormRun.js：

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

您需要为每个属性赋予

.value

。同时，给出一个与

名称相同的id

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

您需要为每个属性赋予.value
。同时，给出一个与名称相同的id

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

只有当您有一个ID为fname
的元素时，这才有效，而您没有
您可以将ID属性设置为元素，如下所示：
<input type="text" name="fname" id="fname">

然后，在比较时，您需要获取它的值
属性
fname.value



标记是自动关闭的，因此它应该是
而不是

只有当您有一个ID为fname
的元素时，这才有效，而您没有
您可以将ID属性设置为元素，如下所示：
<input type="text" name="fname" id="fname">

然后，在比较时，您需要获取它的值
属性
fname.value



标记是自动关闭的，因此它应该是
而不是
以下是解决方案

函数验证表单（表单）{
var fname=form.fname，
lname=form.lname，
pass1=form.pass1，
pass2=form.pass2，
email=form.email；
如果（fname&&fname.value==“”）{
警告（“请输入名字”）；
document.getElementById（'result'）。innerHTML='Invalid'；
返回false；
}
document.getElementById（'result'）。innerHTML='Passed'；
返回true；
}

名字：

姓氏：

密码：

重新输入密码：

电子邮件：

电话：

地址：

日期：

时间：



以下是解决方案

函数验证表单（表单）{
var fname=form.fname，
lname=form.lname，
pass1=form.pass1，
pass2=form.pass2，
email=form.email；
如果（fname&&fname.value==“”）{
警告（“请输入名字”）；
document.getElementById（'result'）。innerHTML='Invalid'；
返回false；
}
document.getElementById（'result'）。innerHTML='Passed'；
返回true；
}

名字：

姓氏：

密码：

重新输入密码：

电子邮件：

电话：

地址：

日期：

时间：



basic javascript。missed.value
.off-topic：您还没有指定是否也在服务器端验证数据，但如果您没有指定，请注意，用户可以绕过JS验证：这可能会有帮助，但不应该被认为是安全的。在服务器端验证相同的数据。下面是一个很好的例子，说明了调试（通过Firebug或Chrome中的等效工具等）在哪里是真正有用的。在var fname=…
之后的行上放置一个断点，您将看到元素有一个名为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。missed.value
.off-topic：您还没有指定是否也在服务器端验证数据，但如果您没有指定，请注意，用户可以绕过JS验证：这可能会有帮助，但不应该被认为是安全的。在服务器端验证相同的数据。下面是一个很好的例子，说明了调试（通过Firebug或Chrome中的等效工具等）在哪里是真正有用的。在var fname=…
之后的行上放置一个断点，您将看到元素有一个名为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不过，不要让人们投票否决你！：P检查你的答案，它不正确。我不明白哪个文盲比你高你犯了和手术一样的错误…：）这里不需要叫名字。@PraveenKumar，但他们确实指出了一件重要的事情——元素需要一个id
属性才能工作！不过，正如大家所指出的，该函数需要使用.value
。不过，不要让人们对你投反对票！：P检查你的答案，它不正确。我不明白哪个文盲比你高你犯了和手术一样的错误…：）这里不需要叫名字。@PraveenKumar，但他们确实指出了一件重要的事情——元素需要一个id
属性才能工作！不过，正如大家所指出的那样，函数需要使用.value
。否决票是为了什么？如果答案有问题，我想知道（通过评论），这样每个人都可以从更好的答案中受益。可能是因为你错过了一个显而易见的答案：表单中没有元素有任何ID，所以你不能执行getElementById
。您所有的其他观点都是有效的。@Sachlen，您能验证我对示例所做的更改现在是否起作用了吗？投了什么反对票？如果答案有问题，我想知道（通过评论），这样每个人都可以从更好的答案中受益。可能是因为你错过了一个显而易见的答案：表格中没有任何元素