Question

我正在设计一个表单来记录用户银行的详细信息。在提交时，我想确保他们已经提供了排序代码，帐号和密码的相应详细信息（我知道你永远不应该为我的项目记录一个引脚!!）。如果任何或所有字段的长度不正确，我希望出现错误。这是我的代码，但目前它似乎没有发现任何问题，也许有人可以指出任何错误？

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

如果没有发现任何字段长度错误，我怎么可能做错呢？

Answer 1

您需要在表单上使用onsubmit事件处理程序而不是onclick

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

在查找排序代码字段时，您也会输入拼写错误。它有错误的大小写（导致空引用错误）。

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

Answer 2

将onclick事件移动到表单中的提交按钮，即： onClick ='return 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>

以html格式进行多字段验证

2 个答案: