以html格式进行多字段验证

我正在设计一个记录用户银行详细信息的表单。在提交时，我想确保他们已经给出了sortcode，帐号和密码的相应详细信息（我知道你绝对不应该为我的项目记录一个密码！）。如果任何或所有字段的长度不正确，我想要显示一个错误。这是我的代码，但目前它似乎没有捕捉到任何问题，也许有人可能会指出任何错误？以html格式进行多字段验证

<script> 
    function formValidator(){ 
     var bankName = document.getElementById('bankName'); 
     var accName = document.getElementById('accName'); 
     var sortcode = document.getElementById('sortcode'); 
     var accNum = document.getElementById('accNum'); 
     var balance = document.getElementById('bal'); 
     var passhint = document.getElementById('passHint'); 
     var pin = document.getElementById('pin'); 
     var overdraft = document.getElementById('ODLimit'); 

     if(sortcodeLength(sortcode, 6)){ 
      if(accountNumLength(accNum, 8)){ 
       if(pinLength(pin, 4)){ 
        return true; 
       } 
      } 
     } 
     return false; 
    } 

     function sortcodeLength(elem, val){ 
    var Input = elem.value; 
    if(Input.length == val){ 
     return true; 
    }else{ 
     alert("Please enter 6 digits for your sortcode"); 
     elem.focus(); 
     return false; 
    } 
    } 

    function accountNumLength(elem, val){ 
      var Input = elem.value; 
      if(Input.length == val){ 
       return true; 
      }else{ 
      alert("Please enter 8 digits for your Account Number"); 
       elem.focus(); 
       return false; 
      } 
     } 

    function pinLength(elem, val){ 
    var Input = elem.value; 
    if(Input.length == val){ 
     return true; 
    }else{ 
     alert("Please enter 4 digits for your Pin"); 
     elem.focus(); 
     return false; 
    } 
} 
</script>

然后，我有一个需要验证

<form onClick='return formValidator()'> 
Bank Name: <input type='text' id='bankName'/><br /> 
Acc Name: <input type='text' id='accName'/><br /> 
Sort Code: <input type='text' id='sortCode'/><br /> 
Acc Num: <input type='text' id='accNum'/><br /> 
Balance: <input type='text' id='bal'/><br /> 
PasswordHint: <input type='text' id='passHint'/><br /> 
Pin: <input type='text' id='pin'/><br /> 
Overdraft Limit: <input type='text' id='ODLimit'/><br /> 
<input type='submit' value='Check Form' /> 
</form>

什么可能我是做错了，这是不是在字段长度捕捉任何错误，我的形式？

来源

2013-09-26 Steve73NI

谢谢你回来的家伙，我想这两个答案，但每次当我打提交按钮我仍然没有得到任何错误，即使我故意将sortcode设置为只有3个数字 – Steve73NI

我更新了我的答案，因为我发现您的代码存在另一个问题。一探究竟。 – Becuzz

您需要使用onsubmit事件处理程序窗体上没有的onclick

<form onsubmit='return formValidator();'>

另外你找到那种代码字段，当有一个错字。它有错误的外壳（这是导致null ref错误）。

var sortcode = document.getElementById('sortCode');

来源

2013-09-26 14:19:42 Becuzz

愚蠢的错误，谢谢指出！现在工作！ – Steve73NI

移动onclick事件提交按钮从形式即：的onClick =“返回formValidator（）”

<form > 
Bank Name: <input type='text' id='bankName'/><br /> 
Acc Name: <input type='text' id='accName'/><br /> 
Sort Code: <input type='text' id='sortCode'/><br /> 
Acc Num: <input type='text' id='accNum'/><br /> 
Balance: <input type='text' id='bal'/><br /> 
PasswordHint: <input type='text' id='passHint'/><br /> 
Pin: <input type='text' id='pin'/><br /> 
Overdraft Limit: <input type='text' id='ODLimit'/><br /> 
<input type='submit' value='Check Form' onClick='return formValidator()' /> 
</form>

来源

2013-09-26 14:21:47

以html格式进行多字段验证

回答

相关问题