javascript 表单与多个表单的无干扰自行验证

Form对象代表了一个HTML表单,它通常可以作为forms[]数组的一个元素来使用,而这个数组是Document对象的一个属性.在这里将不会对表单中的具体组成元素做详细的介绍.

下面是一个示例,报告form表单元素的,将代码copy入body中,可以使用

<form id="everything" action="" method="get">

<table width="1073" border="1">

  <tr>

    <td width="244" height="78">username:

      <label>

      <input type="text" name="textfield" />

    </label></td>

    <td width="315">password:<input type="password"></td>

    <td width="243" rowspan="4">input elements:      

      <textarea name="textarea" cols="28" rows="20"></textarea></td>

    <td width="243" rowspan="4">

    <input name="clearbutton" type="button" value="Clear" /><br>

    <input type="submit" name="submitbutton" value="Submit"/><br>

<input type="reset" name="resetbutton"  value="Reset"/> </td>

  </tr>

  <tr>

    <td height="78" colspan="2">Filename:

      <label>

      <input type="file" name="file" size="15"/>

      </label></td>

    </tr>

  <tr>

    <td height="89">my computer periphrrals: <br>

    <input type="checkbox" name="extras" value="burner">DVD Writer<br>

<input type="checkbox" name="extras" value="printer">Printer<br>

<input type="checkbox" name="extras" value="card">Card<br>

</td>

    <td>my web browser: <br>

    <input type="radio" name="browser" value="ff">Firefox<br>

<input type="radio" name="browser" value="ie">Internet Explorer<br>

<input type="radio" name="browser" value="other">Other<br>

</td>

    </tr>

  <tr>

    <td height="165">my Hobbilea:<br>

    <select multiple="multiple" name="hobbies" size="4">

     <option value="programming">Hacking Javascript

 <option value="surfing">Surfing the Web

 <option value="caffeine">Drinking Coffee

 <option value="annoying">Annoying my friends

</select>

 </td>

    <td>my favorite color: <br>

    <select name="color">

     <option value="red">Red

 <option value="blue">Blue

 <option value="green">Green

 <option value="peach">Peach

 <option value="violet">Violet

</select>

</td>

    </tr>

</table>

</form>

<div align="center">

<table width="600" border="4" bgcolor="#FFC0CB" cellspacing="1" cellpadding="4">

  <tr>

    <td><b>Form Elements</b></td>

    <td>Text</td>

    <td>Password</td>

<td>Textarea</td>

<td>FileU</td>

<td>Checkbox</td>

  </tr>

  <tr>

    <td>Radio</td>

    <td>Select</td>

    <td>Select(menu)</td>

<td>Button</td>

<td>Submit</td>

<td>Reset</td>

  </tr>

</table>

</div>

<script type="text/javascript">

    function report(element,event){

   if((element.type=="select-one")||(element.type=="select-multiple")){

       value=" ";

   for(var i=0;i<element.options.length;i++){

      if(element.options[i].selected)value+=element.options[i].value+" ";

   }  

   }else if(element.type=="textarea")value="...";

   else value=element.value;

   var msg=event+": "+element.name+'('+value+')\n';

   var t=element.form.textarea;

   t.value=t.value+msg;

    }

     

 

 function addhandlers(f){

     console.log(f);

   for(var i=0;i<f.elements.length;i++){

       var e=f.elements[i];

   e.onclick=function(){report(this,"Click");}

   e.onchange=function(){report(this,"Change");}

   e.onfocus=function(){report(this,"Focus");}

           e.onblur=function(){report(this,"Blur");}

   e.onselect=function(){report(this,"Select");}    

     }

 

     f.clearbutton.onclick=function(){

    this.form.textarea .value="";

report(this,"Click");

 }

         f.submitbutton.onclick=function(){

    report(this,"Click");

return false;

 } 

 

 f.resetbutton.onclick=function(){

    this.form.reset();

report(this,"Click");

return false;

 }   

 }

 

 addhandlers(document.forms[0]);

</script>

上面的例子会展示form表单元素的一些元素事件的响应.

下面是针对form表单的验证,这些验证会自动运行

(function(){

       if(window.addEventListener)window.addEventListener("load",init,false);//firefox

   else if(window.attachEvent)window.attachEvent("onload",init);//ie

   

   function init(){

     for(var i=0;i<document.forms.length;i++){

   var f=document.forms[i];//get form

   var needValidation=false;

   for(var j=0;j<f.elements.length;j++){

     var e=f.elements[j];//get element of form

 if(e.type!="text")continue;

 var pattern=e.getAttribute("pattern");

     var required=e.getAttribute("required")!=null;

 if(required&&!pattern){

   pattern="\\S";

   e.setAttribute("pattern",pattern);

 }

      if(pattern){

    e.onchange=validateOnChange;//when filled content is changed

needsValidation=true;

  }  

   }

    if(needsValidation)f.onsubmit=validationOnSubmit; //when form is submited

 }

   }

       

    function validateOnChange(){

    var textfield=this;

var pattern=textfield.getAttribute("pattern");

var value=this.value;

if(value.search(pattern)==-1)textfield.className="invalid";

else textfield.className="valid";

}

  

        function validateOnSubmit(){

    var invalid=false;

for(var i=0;i<this.elements.length;i++){

   var e=this.elements[i];

   if(e.type=="text"&&e.onchange==validateOnChange){

     e.onchange();

 if(e.className=="invalid")invalid=true;

   }

}

     if(invalid){

    alert("The form is incompletely or incorrectly filled out.\n"+"Please correct the highlighted fields and try again.");

    return false;

 }

} 

  })();