作业，javascript，表单验证

我需要做一个JavaScript表单验证。我想验证每个字段，因为用户点击或选项卡到下一个字段。（onBlur？）我必须验证电子邮件的正确形式。与地址和电话一样。我不确定在HTML表单中放置验证码的位置。验证需要在发送到服务器之前在浏览器上完成。我会很感激任何建议或教程。作业，javascript，表单验证

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title>Request Form</title> 


    <meta name="Description" content="This webpage is for Customer Demographics" /> 
    <meta name="Keywords" content="Rhonda , email, " /> 
    <meta name="author" content="Rhonda " /> 
    <meta name="copyright" content="Copyright 2010 Rhonda , All Rights 

Reserved" /> 
    <meta name="robots" content="all" /> 
    <meta name="revisit-after" content="15 days" /> 
    <meta name="rating" content="safe for kids" /> 

<script type="text/javascript" > 

</script> 

</head> 

<body> 

<body style="background-color:lightsteelblue"> 


<h1> 
     Welcome Kudler Fine Foods customer. 
     <br /> 
     <br /> 
     <br /> 
    Please enter the following details in order 
    to be added to our preferred customer mailing list: 
     <br /> 
     <br /> 
     <br /> 
</h1>  

    <form action=""> 
    <fieldset> 
    <legend>Personal information:</legend> 

<p> 

     First Name: 

     <br /> 

     <input type="text" name="txtFName" VALUE="" SIZE="30" MAXLENGTH="50" /> 

</p> 

<p> 

     Middle Initial: 

     <br /> 

     <input type="text" name="txtMiddle" VALUE="" SIZE="5" MAXLENGTH="3" /> 

</p> 

<p> 

    Last Name: 

     <br /> 

     <input type="text" name="txtLName" VALUE="" SIZE="30" MAXLENGTH="50" /> 
    <br /> 
    <br /> 
    </fieldset> 
    </form> 

</p>  

    <form action=""> 
    <fieldset> 
    <legend>Address:</legend> 


<p> 
    Mailing Address: 
    <br /> 
    <br /> 
    Street <INPUT TYPE="TEXT" NAME="Street" VALUE="" SIZE="25" 

MAXLENGTH="50" /> 
    <br /> 
    City <INPUT TYPE="TEXT" NAME="City" VALUE="" SIZE="35" MAXLENGTH="50"  

/><br /> 
    State <INPUT TYPE="TEXT" NAME="State" VALUE="" SIZE="2" MAXLENGTH="2" 

/> <br /> 
    Zip Code <INPUT TYPE="TEXT" NAME="State" VALUE="" SIZE="5"  

MAXLENGTH="5" /> <br /> 
     <br /> 
    <br /> 

    </fieldset> 
    </form> 
</p> 


<p> 
    Email Address:  
    <br /> 

    <INPUT TYPE="TEXT" NAME="Email" VALUE="" SIZE="25" MAXLENGTH="50" /> 
</p> 


<p> 
    Telephone Number: 
    <br /> 
    <input type="TEXT" NAME="AreaCode" VALUE="" SIZE="3" MAXLENGTH="3"/> 
    <INPUT TYPE="TEXT" NAME="Telephone" VALUE="" SIZE="7" MAXLENGTH="7" /> 
    <br /> 
</p>   


<!--NOTES 
This part was not mandantory. I was just trying some of the extra ways of adding input that the book discussed-->  

<p>  
    Gender: 
    <br /> 
    <input type="radio" name="sex" value="male" /> Male<br /> 
     <input type="radio" name="sex" value="female" /> Female 

</p> 

<p> 
    How did you hear about us? 
    <br /> 
    <input type="checkbox" name="Friend" value="Friend" /> From a friend 
    <br /> 
    <input type="checkbox" name="Advertisement" value="Advertisement" />  

Store Advertisement 
    <br /> 
    <input type="checkbox" name="Online" value="Online" /> From Online 
    <br /> 
    <input type="checkbox" name="Other" value="Other" /> Other 
    <br /> 
</p> 

<p> 

    How do you wish to be contacted? 
    <br /> 
    <form action=""> 
    <select name="contact"> 
    <option value="telephone">Telephone</option> 
    <option value="E-mail">E-mail</option> 
    <option value="Snail-mail">Snail-mail</option> 
    </select> 
    </form> 

</p> 

<p> 

<form> 
    <form name="input" 
    <form action="acknowledgement.html"> 
    <INPUT TYPE="SUBMIT" NAME="submit" VALUE="Submit and Verify"> 
</form>    
</p> 

<form> 

<p> 

<input type="reset" Name="resetbutton" Value="Reset Form Now"> 

</p> 


</form> 
<p><a href="#top">Back to Top</a></p> 

</body> 

</html> 

Code for Acknowledgement Page: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title>Acknowledgement Page</title> 


    <meta name="Description" content="This webpage is for Customer Demographics" /> 
    <meta name="Keywords" content=" email, " /> 
    <meta name="author" content="Rhonda " /> 
    <meta name="copyright" content="Copyright 2010 Rhonda, All Rights Reserved" /> 
    <meta name="robots" content="all" /> 
    <meta name="revisit-after" content="15 days" /> 
    <meta name="rating" content="safe for kids" /> 


</head> 

<body> 

<body style="background-color:lightsteelblue"> 

<script type="text/javascript"></script> 

<h1>Request Confirmation</h1> 
<p>Your request has been received.</p> 
<p>Thank you. You will be added to our customer mailing list</p>" 
<p>Please use your browsers back button or, </p>" 




<address> 

<a href="index.htm">Click here</a> 

</address> 

</body> 

</html>

来源

2010-11-01 rhonda

您应该从您的代码示例中删除所有不相关的标记。 – mikerobi 2010-11-01 17:48:35

你可以使用像jQuery这样的库来注册事件吗？ – Fil 2010-11-01 17:56:55

我不这么认为 – rhonda 2010-11-01 18:08:30

最简单的解决方案是将您的事件包含在元素标记中。这种方法在大多数Web开发人员中已经不受欢迎，但是如果你不能使用类似jQuery或prototype的东西，并且作业是家庭作业，那么以下内容应该没问题。

请记住，严格使用onblur方法可以防止您检查所需字段是否留空，因此您通常也希望在单击提交按钮时验证整个表单。

<script type="text/javascript"> 
function validateMiddleName() { 
    // get element, do some validation 
    if(!valid) { 
    alert("invalid middle name"); 
    } 
} 

function validateForm() { 
    validateFirstName(); 
    validateMiddleName(); 
    validateLastName(); 
    //etc... 
} 
</script> 

<form onsubmit="validateForm()"> 
    <input type="text" name="txtMiddle" VALUE="" SIZE="5" MAXLENGTH="3" onBlur="validateMiddleName()"/> 
</form>

来源

2010-11-01 18:39:36 Fil

是的，onBlur会工作，但这往往会有点烦人。通常，验证在用户尝试提交表单时完成。

<script type="text/javascript> 
function ValidateEmail(id) 
{ 
    var at = '@'; 
    var dot = '.'; 
    var lat = id.value.indexOf(at); 
    var lstr = id.value.length; 
    var ldot = id.value.indexOf(dot); 

    if ((id.value == null) || (id.value == "")) return false; 
    if (id.value.indexOf(at) == -1) return false; 
    if ((id.value.indexOf(at) == -1) || (id.value.indexOf(at) == 0) || (id.value.indexOf(at) == lstr)) return false; 
    if ((id.value.indexOf(dot) == -1) || (id.value.indexOf(dot) == 0) || (id.value.indexOf(dot) == lstr)) return false; 
    if (id.value.indexOf(at,(lat+1)) != -1) return false; 
    if ((id.value.substring(lat-1,lat) == dot) || (id.value.substring(lat+1,lat+2) == dot)) return false; 
    if (id.value.indexOf(dot,(lat+2)) == -1) return false; 
    if (id.value.indexOf(' ') != -1) return false; 
    if (lstr > 320) return false; 
    if (lat > 64) return false; 
    if ((lstr - lat) > 255) return false; 

    return true; 
} 

function ValidateForm() 
{ 
    var nameID = document.myform.name; 
    var emailID = document.myForm.email; 

    if ((nameID.value == null) || (nameID.value == "")) 
    { 
     alert("Please fill in your name."); 
     nameID.focus(); 
     nameID.select(); 
     return false; 
    } 

    return ValidateEmail(emailID); 
} 
</script> 

<form name="myForm" onSubmit="return ValidateForm()" action="#"> 
<input type="text" name="name"></input> 
<input type="text" name="email"></input> 
</form>

来源

2010-11-01 17:59:53

作业，javascript，表单验证

回答

相关问题