5

我在表格模式下制作了这样的表格：

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

当我使用此验证通常形成其工作但在表格模式下，验证代码不起作用..帮我解决这个问题...tq

查看演示 http://jsfiddle.net/andricoga/u9eZz/

4

3 回答 3

1

在您的 validatePwd() 函数中替换

eobj1.innerHTML = error;

和

eobj.innerHTML = error;

您尚未定义此 eobj1 对象，因此它会导致运行时 javascript 错误。

于 2013-03-18T10:02:56.413 回答
1

我更改了代码以在字段旁边显示错误，试试这个

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>
于 2013-03-18T14:45:36.713 回答
1

您已onSubmit="return validasi()"在 form 中声明，但您在其中定义了函数。对于验证工作，您需要为此定义函数。

function validasi(){
   // validation code goes here
}
于 2013-03-18T04:42:29.823 回答