Question

尝试以电子邮件重置页面的形式练习一些表单验证。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <title>
        form validation
    </title>
    <script>
        function validateForm()
            {
                var email=document.forms["email_reset"]["user_email"].value;
                var atpos=email.indexOf("@");
                var dotpos=email.indexOf(".");
                var pass1=document.getElementByID("new_pwd");
                var pass2=document.getElementByID("confirm_pwd");
                if(atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length) {
                    alert("Your email address is invalid!");
                    return false;
                }
                if(pass1 != pass2) {
                    alert("Your passwords do not match!");
                    return false;
                }
                else {
                    alert("Your password has been succesfully reset!");
                }
            }
    </script>
</head>
<body>
    <form name="email_reset" onsubmit="validateForm()">
        <br />
        <font id="title" face="arial" color="white" size="2">[ Enter your email and new password below ]</font><br /><br />
        <label id="email_lab" color="white">Email Address:</label>
        <input type="text" class="input" name="user_email" id="user_email" maxlength="100" align="right"  /><br />
        <label id="newpass_lab" color="white">New Password:</label>
        <input type="password" class="input" name="new_pwd" id="new_pwd" maxlength="64" align="right"  /><br />
        <label id="confirmpass_lab" color="white">Confirm Password:</label>
        <input type="password" class="input" name="confirm_pwd" id="confirm_pwd" maxlength="64" align="right"  /><br />
        <input style="width: 25%; margin-bottom: 10px;" type="submit" class="input" id="sub_button" value="Submit" /><br />
    </form>
</body>
</html>

如果电子邮件输入与电子邮件格式不匹配，并且密码输入不相同，我希望有一个警告弹出窗口。但是当我点击提交时，我什么都没得到。

我使用this教程作为指南。我想不知怎的，我仍然缺少一些东西。

Answer 1

错误：

时间戳：2013年8月14日上午11:19:50错误：TypeError： document.getElementByID不是函数源文件：文件：/// C：？/Users/developer/Desktop/tes.html USER_EMAIL = ASD％40yahoo.com＆安培; new_pwd = ASD＆安培; confirm_pwd = ASD 行：13

您的问题是功能名称。

document.getElementById不是document.getElementByID

你应该得到HTML元素的价值。

var pass1=document.getElementById("new_pwd").value;
var pass2=document.getElementById("confirm_pwd").value;

Answer 2

将事件添加到validateForm（），然后添加一个preventDefault

function validateForm(e) {
     e.preventDefault();
....

您的表单在您进行验证之前正在提交

------ -------或者

将提交按钮更改为常规按钮。

而不是在您的表单上有一个onsubmit有validateForm onClick

成功提交表格

Answer 3

正如评论中所建议的那样，您需要从侦听器返回false以防止提交。

此外，您要比较两个元素（new_pwd和confirm_pwd）而不是它们的值。 DOM元素是对象，两个对象永远不会相等。

> var pass1=document.getElementByID("new_pwd");
> var pass2=document.getElementByID("confirm_pwd");
> ...
> if(pass1 != pass2) {

您可能会发现使用控件名称而不是ID来引用表单中的控件更容易（您可以从表单控件中删除ID）。此外，最好在侦听器中传递对表单的引用，例如

<form onsubmit="return validateForm(this)">

现在功能可以是：

function validateForm(form) {
    var email = form.user_email.value;
    var atpos = email.indexOf("@");
    var dotpos = email.indexOf(".");
    var pass1 = form.new_pwd.value;
    var pass2 = form.confirm_pwd.value;
    ...
}

成功警报应该来自表单导航的任何位置，并且应该从服务器传递。客户端的成功与服务器的成功非常不同。

无法让javascript运行onsubmit

3 个答案: