家庭作业，javascript，表单验证

时间：2010-11-01 17:46:32

标签： javascript

我需要做一个javascript表单验证。 我希望在用户点击或标记到下一个字段时验证每个字段。 （onBlur？） 我必须验证电子邮件的正确格式。与地址和电话一样。 我不确定将验证代码放在HTML表单中的哪个位置。 在发送到服务器之前，需要在浏览器上进行验证。 我很感激任何建议或教程。 

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

2 个答案:

答案 0 :(得分：0)

是的，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>

答案 1 :(得分：0)

最简单的解决方案是将您的事件包含在元素标记中。这种方法已经失去了大多数Web开发人员的青睐，但是如果你不能使用像jQuery或原型这样的东西，并且作业是作业，那么下面应该没问题。

请注意，严格使用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>
相关问题
最新问题