驗證形式與JavaScript

Question

我做了我的形式表模式 這樣的：

<form name="register" method="post" action="#" onSubmit="return validasi()">   
    <table width="507" border="0"> 
     <h1 class="title"><a href="#">Form Perubahan Password</a></h1> 
     <tr> 
      <td width="190" ><span id="usernameerror" class="style20">Masukkan Username </span></td> 
      <td width="319"><input name="username" type="text"></td> 
     </tr> 
     <tr> 
      <td><span id="passworderror" class="style20">Masukkan Password Lama</span></td> 
      <td><input name="pass" type="password"></td> 
     </tr> 
     <tr> 
      <td><span id="password1error" class="style20">Masukkan Password Baru</span></td> 
      <td><input name="pass1" type="password"></td> 
     </tr> 
     <tr> 
      <td><span id="password2error" class="style20">Ulangi Masukkan Password Baru</span></td> 
      <td><input name="pass2" type="password"></td> 
     </tr> 
     <tr> 
      <td>&nbsp;</td> 
      <td><input type="submit" name="Submit" value="Submit"> 
      <input type="reset" name="reset" value="Reset"></td> 
     </tr> 
     </table> 
    </form> 

，並與JavaScript本我的驗證代碼。檢查出來..

<script language="javascript"> 
function checkName(register) 

    { 
     var eobj = document.getElementById('usernameerror');   
     var susername = register.username.value;   
     var oRE = /^[a-z0-9]+[_.-]?[a-z0-9]+$/i;   
     var error = false;   
     eobj.innerHTML = '';   
     if (susername == '') { 

      error = 'Error: Username tidak boleh kosong';   
      register.username.focus(); 
     } 
     else if (!oRE.test(susername)) 

    { 
     error="Salah format"; 
    } 
     if (error)   
     { 
      register.username.focus();   
      eobj.innerHTML = error;   
      return false; 
     }   
     return true; 
    } 
    function validatePwd(register) /* old password verification */ 
    { 
     var eobj = document.getElementById('passworderror'); 
     var invalid = ' '; 
     var pw = register.pass.value; 
     var error = false; 
     eobj.innerHTML = ''; 
     if (pw.length < 1) 

     { 
      error = 'Masukkan password anda'; 
     } 
     else if (pw.indexOf(invalid) > -1) 
     { 
      error = 'Anda harus mengisi password'; 
     } 
     if (error) 
     { 
      register.pass.focus(); 
      eobj.innerHTML = error; 
      return false 
     } 
      return true; 
    } 
    function validatePwd1(register) /* password & retype-password verification */ 

    { 

     var eobj1 = document.getElementById('password1error');   
     var eobj2 = document.getElementById('password2error');   
     var invalid = ' ';   
     var pw1 = register.pass1.value;   
     var pw2 = register.pass2.value;   
     var error = false;   
     eobj1.innerHTML = '';   
     eobj2.innerHTML = '';   
     if (pw1.length < 1) 

     { 
       error = 'Masukkan password anda'; 

     } 
     else if (pw1.indexOf(invalid) > -1) 

     { 
       error = 'Anda harus mengisi password'; 

     }   
     if (error) 

     { 

      register.pass1.focus();   
      eobj1.innerHTML = error;   
      return false 

     } 

     if (pw1 != pw2) 

     { 
        eobj2.innerHTML = ' password tidak sama, coba masukkan kembali password anda';   
      return false; 

     } 
       return true; 

    } 


    function validasi() 

    { 

     var form = document.forms['register'];   
     var ary = [checkName, validatePwd, validatePwd1];   
     var rtn = true;   
     var z0 = 0;   
     for (var z0 = 0; z0 < ary.length; z0++) 

     {   
      if (!ary[z0](form)) 

      {   
       rtn = false;   
      }   
     } 
     return rtn; 
     } 
</script> 

，當我在使用此驗證通常形成其工作，但在表模式的驗證碼不work..help我解決這個問題... TQ

視圖演示 http://jsfiddle.net/andricoga/u9eZz/

Answer 1

您已聲明onSubmit="return validasi()"在窗體中，但您在那裏定義函數。爲了驗證工作，您需要爲其定義函數。

function validasi(){ 
    // validation code goes here 
} 

Answer 2

在你validatePwd（）函數替換

eobj1.innerHTML = error; 

與

eobj.innerHTML = error; 

您還沒有定義這個eobj1對象，因此它是導致運行時JavaScript錯誤。

Answer 3

我改變了代碼以顯示字段旁邊的錯誤，嘗試了這一點

的Javascript

<script language="javascript"> 

function checkName() 

    { 
     var obj = document.getElementById('usernameerror');   
     var susername = document.getElementById('username').value;   
     var oRE = /^[a-z0-9]+[_.-]?[a-z0-9]+$/i;   
     var error = false;   
     obj.innerHTML = ''; 

     if (susername == '') { 

      error = 'Username can not be empty';   

     } 
     else if (!oRE.test(susername)) 

    { 
     error = 'One format'; 
    } 
     if (error)   
     { 
      document.getElementById('username').focus();   
      obj.innerHTML = error;   
      return false; 
     }   
     return true; 
    } 



function validatePwd() /* password & retype-password verification */ 
    { 
     var obj = document.getElementById('pwderror'); 
     var invalid = ' '; 
     var pw = document.getElementById('pass').value; 
     var error = false; 
     obj.innerHTML = ''; 

     if (pw.length < 1) 

     { 
      error = 'Enter your old password'; 
     } 
     else if (pw.indexOf(invalid) > -1) 
     { 
      error = 'You need a password'; 
     } 
     if (error) 
     { 
      document.getElementById('pass').focus(); 
      obj.innerHTML = error; 
      return false 
     } 
      return true; 
    } 


function validatePwd1() /* password & retype-password verification */ 

    { 

     var obj = document.getElementById('pwd1error');     
     var invalid = ' ';   
     var pw1 = document.getElementById('pass1').value;   
     var pw2 = document.getElementById('pass2').value;  
     var error = false;   
     obj.innerHTML = '';   

     if (pw1.length < 1) 

     { 
       error = 'Enter your new password'; 

     } 
     else if (pw1.indexOf(invalid) > -1) 

     { 
       error = 'You need a password'; 

     }   
     if (error) 

     { 

      document.getElementById('pass1').focus();   
      obj.innerHTML = error;   
      return false 

     } 

     if (pw1 != pw2) 

     { 
        obj.innerHTML = 'passwords are not the same, try to re-enter your password';   
      return false; 

     } 
       return true; 

    } 


function validate() 

    { 

     var form = document.forms['register'];   
     var ary = [checkName, validatePwd, validatePwd1];   
     var rtn = true;   
     var z0 = 0;   
     for (var z0 = 0; z0 < ary.length; z0++) 

     {   
      if (!ary[z0](form)) 

      {   
       rtn = false;   
      }   
     } 
     return rtn; 
     } 

</script> 

形式

<form name="register" method="post" action="#" onSubmit="return validate()">   
    <table border="0"> 
    <tr> 
    <td colspan="2"> 
     <h1 class="title"><a href="#">Password Change Form</a></h1> 
    </td> 
    </tr> 
     <tr> 
      <td><span class="style20">Username </span></td> 
      <td><input name="username" id="username" type="text"></td> 
     <td><span id="usernameerror" class="style20">&nbsp;</span></td> 
     </tr> 
     <tr> 
      <td><span class="style20">Old Password</span></td> 
      <td><input name="pass" id="pass" type="password"></td> 
     <td><span id="pwderror" class="style20">&nbsp;</span></td> 
     </tr> 
     <tr> 
      <td><span class="style20">New Password</span></td> 
      <td><input name="pass1" id="pass1" type="password"></td> 
     <td><span id="pwd1error" class="style20">&nbsp;</span></td> 
     </tr> 
     <tr> 
      <td><span class="style20">Repeat New Password</span></td> 
      <td><input name="pass2" id="pass2" type="password"></td> 
     </tr> 
     <tr> 
      <td>&nbsp;</td> 
      <td><input type="submit" name="Submit" value="Submit"> 
      <input type="reset" name="reset" value="Reset"></td> 
     </tr> 
     </table> 
</form>