Validating Common Form Input - Part 1

9871 ワード
職場 検証＃ケンショウ＃ カジュアル
1.テストの準備をするForm

  
  
  
  
    
   
   
   
   
  1. <form onsubmit="return validate(this);"> 
    2. 
   
   
   
   
  2.   Username<br /> 
    3. 
   
   
   
   
  3.   <input type="text" name="username" value="" /><br /> 
    4. 
   
   
   
   
  4.   Password<br /> 
    5. 
   
   
   
   
  5.   <input type="password" name="password1" value="" /><br /> 
    6. 
   
   
   
   
  6.   Repeat password<br /> 
    7. 
   
   
   
   
  7.   <input type="password" name="password1" value="" /><br /> 
    8. 
   
   
   
   
  8.   Name<br /> 
    9. 
   
   
   
   
  9.   <input type="text" name="name" value="" /><br /> 
    10. 
   
   
   
   
  10.   Address<br /> 
    11. 
   
   
   
   
  11.   <input type="text" name="address" value="" /><br /> 
    12. 
   
   
   
   
  12.   Phone<br /> 
    13. 
   
   
   
   
  13.   <input type="text" name="phone" value="" /><br /> 
    14. 
   
   
   
   
  14.   Email<br /> 
    15. 
   
   
   
   
  15.   <input type="text" name="email" value="" /><br /> 
    16. 
   
   
   
   
  16.   Website<br /> 
    17. 
   
   
   
   
  17.   <input type="text" name="website" value="" /><br /> 
    18. 
   
   
   
   
  18.   <input type="Submit" value="Submit" /> 
    19. 
   
   
   
   
  19. </form> 
    20.

2.formに検証イベントを追加する

  
  
  
  
    
   
   
   
   
  1. <form onsubmit="return validate(this);"> 
    2. 
   
   
   
   
  2. ...  
    3. 
   
   
   
   
  3. </form> 
    4.

3.簡単な検証方法(単一要素を空にできないことを検証)

  
  
  
  
    
   
   
   
   
  1. function validate(form) {  
    2. 
   
   
   
   
  2.   // If no value in Username input field  
    3. 
   
   
   
   
  3.   if(!form.elements.username.value)  
    4. 
   
   
   
   
  4.     return false;  
    5. 
   
   
   
   
  5.   else 
    6. 
   
   
   
   
  6.     return true;  
    7. 
   
   
   
   
  7. }  
    8.

4.2番目の検証方法(すべての要素が空でないことを確認)

  
  
  
  
    
   
   
   
   
  1. function validate(form) {  
    2. 
   
   
   
   
  2.   // For every input field in the form  
    3. 
   
   
   
   
  3.   for(var i=0; i<form.elements.length; i++) {  
    4. 
   
   
   
   
  4.     // If the input field is empty  
    5. 
   
   
   
   
  5.     if(!form.elements[i].value)  
    6. 
   
   
   
   
  6.       return false;  
    7. 
   
   
   
   
  7.   }  
    8. 
   
   
   
   
  8.   return true;  
    9. 
   
   
   
   
  9. }  
    10.

GdiPlus[24]:IGPPrivateFontCollection:それぞれファイルとメモリからフォントをロード
CenterNet読書ノート