-3

我正在尝试使用 JavaScript 验证用户在 Web 登录表单上的输入，但有些东西让我发疯了，我不知道出了什么问题。限制：参考。number 必须是数字，并且 postcode 只能包含数字和字母。所以我通过几个函数来检查这个和输入字段的长度。此外还有 HTML 表单和 JavaScript 文件。编辑：所有验证方法都会失败，即使我没有在字段中输入值，它也会将我重定向到成功的登录页面。

<html>
<form method"POST" id="loginform"  action="thank-you.html">
<table>
    <tr>
<td>  Post Code :  <input id="postcode" type="text"  required="required" /></td>
<td>   Ref. Number :<input id="passw" type="password"  required="required" /></td>
<td> <input type="submit" class="submit"value="Submit"  </td>
    </tr>
</table>
</form>
</html

和 javascrit 代码：

function formValidation() {
    document.getElementById("loginform").onsubmit = function () {
        var uid = document.loginform.postcode;
        var passid = document.loginform.passw;
        if (postcode_validation(uid, 5, 7)) {
            if (passid_validation(passid, 4, 6)) {
                if (alphanumeric(uid)) {
                    if (allnumeric(passid)) {}
                }
            }
        }
    }
    return false;
}

function userid_validation(uid, mx, my) {
    var uid_len = uid.value.length;
    if (uid_len == 0 || uid_len >= my || uid_len < mx) {
        alert("Postcode should not be empty / length be between " + mx + " to " + my);
        uid.focus();
        return false;
    }
    return true;
}

function passid_validation(passid, mx, my) {
    var passid_len = passid.value.length;
    if (passid_len == 0 || passid_len >= my || passid_len < mx) {
        alert("Password should not be empty / length be between " + mx + " to " + my);
        passid.focus();
        return false;
    }
    return true;
}

function alphanumeric(uid) {
    var letters = /^[0-9a-zA-Z]+$/;
    if (uid.value.match(letters)) {
        return true;
    } else {
        alert('postcode must have alphanumeric characters only');
        uid.focus();
        return false;
    }
}

function allnumeric(passid) {
    var numbers = /^[0-9]+$/;
    if (passid.value.match(numbers)) {
        return true;
    } else {
        alert('REf number must have numeric characters only');
        passid.focus();
        return false;
    }
}
window.onload = function () {
    formValidation();
}
4

3 回答 3

1

提交标签未关闭。查看突出显示 Stackoverflow 的代码，提交标签上缺少它。

<td> <input type="submit" class="submit"value="Submit"  </td>

应该：

<td> <input type="submit" class="submit" value="Submit" /></td>
于 2013-01-11T23:02:05.183 回答
0

Change your code to the following:

<html>
<form method"POST" onSubmit="return formValidation(this)" id="loginform"  action="thank-you.html">
<table>
    <tr>
<td>  Post Code :  <input name="postcode" id="postcode" type="text"  required="required" /></td>
<td>   Ref. Number :<input name="passw" id="passw" type="password"  required="required" /></td>
<td> <input type="submit" class="submit"value="submit">  </td>
</tr>
</table>
</form>
</html>

And:

function formValidation(theForm) {
    if (postcode_validation(theForm.postcode, 5, 7)) {
        if (passid_validation(theForm.passwd, 4, 6)) {
            if (alphanumeric(this.postcode)) {
                if (allnumeric(theForm.passwd)) {
                    return true;
                }
            }
        }
    }
    return false;
}

This way you don't have to fetch elements by ID, because you have everything you need inside the added parameter theForm. If you don't use the IDs for layout just remove them entirely.

于 2013-01-14T13:35:07.487 回答
0

我认为您可以尝试在最里面的 if 块中添加最终的 return 语句。

function formValidation() {
    document.getElementById("loginform").onsubmit = function () {
        var uid = document.loginform.postcode;
        var passid = document.loginform.passw;
        if (postcode_validation(uid, 5, 7)) {
            if (passid_validation(passid, 4, 6)) {
                if (alphanumeric(uid)) {
                    if (allnumeric(passid)) {
                        return true;
                    }
                }
            }
        }
    }
    return false;
}

我知道这看起来太简单了，但是您的代码中显然缺少它。如果没有 return 语句，Javascript 默认为undefined，什么会阻止您的表单提交。

于 2013-01-11T23:22:36.183 回答