Question

我正在尝试使用JavaScript验证用户在Web登录表单上的输入，但有些事情让我疯狂，我不知道什么是错的。限制：参考数字必须是数字，邮政编码只能包含数字和字母。所以我通过几个函数检查这个和输入字段的长度。另外还有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();
}

Answer 1

提交标记未关闭。查看突出显示Stackoverflow放置的代码，它在提交标记上缺失。

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

应该是：

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

Answer 2

我想你可能会尝试在最里面的if-block中添加一个最终的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 ，那么什么会使您的表单不再提交。

Answer 3

将您的代码更改为以下内容：

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

和

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

这样您就不必按ID获取元素，因为您在添加的参数theForm中拥有所需的一切。如果您不使用布局ID，则只需完全删除它们。

为什么我不能使用javascript验证用户输入？

3 个答案: