javascript - 无法在提交时运行 JavaScript

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

如果电子邮件输入与电子邮件格式不匹配，并且密码输入不完全相同，我希望弹出警报。但是，当我单击提交时，我什么也得不到。

我使用本教程作为指南。我想不知何故我仍然错过了一些东西。

score 2 · Accepted Answer

错误：

时间戳：2013 年 8 月 14 日上午 11:19:50 错误：TypeError：document.getElementByID 不是函数源文件：file:///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;

score 0 · Accepted Answer

As suggested in comments, you need to return false from the listener to prevent submission.

Also, you are comparing two elements (new_pwd and confirm_pwd) rather than their values. DOM elements are objects, and two objects are never equal.

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

You might find it easier to use control names rather than IDs for referencing the controls in the form (and you can remove the IDs from the form controls). Also, it's a good idea to pass a reference to the form in the listener, e.g.

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

Now the function can be:

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

The alert for success should be from wherever the form navigates too and should be delivered from the server. Success at the client is very, very different to success at the server.

score 0 · Accepted Answer

将事件添加到您的validateForm()，然后添加 preventDefault

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

在您完成验证之前，您的表单正在提交

- - - 或者 - - - -

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

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

成功后提交表格

javascript - 无法在提交时运行 JavaScript

3 回答 3

Related

Reference