将事件处理程序移动到单独的文档

Moving event handlers to separate document

本文关键字：单独 文档 移动 事件处理 程序      更新时间：2023-09-26

我目前正在使用这个HTML代码:

<form onsubmit="return validateForm()" action="page.html" >
Name:  <input type="text" id="name" /><br />
Email: <input type="text" id="email" /><br />
<input type="submit" value="Submit" />
</form>

但是我想把我的事件处理程序移动到我单独的javascript中，进入名为initiate的函数中。我的javascript是这样的:

function formValidator(){
    var name = document.getElementById("name");
    var email = document.getElementById("email");

    if(isAlphabet(name, "Fill in name"))
    {
        if(emailValidator(email, "Fill in email"))
        {
            return true;
        }
    }

    return false;
}
function isAlphabet(elem, helpMsg)
{
    var alphaExp = /^[a-zA-Z]+$/;
    if(elem.value.match(alphaExp))
    {
        return true;
    }
    else
    {
        alert(helpMsg);
        elem.focus();
        return false;
    }
}
function emailValidator(elem, helpMsg)
{
    var emailExp = /^['w'-'.'+]+'@[a-zA-Z0-9'.'-]+'.[a-zA-z0-9]{2,4}$/;
    if(elem.value.match(emailExp))
    {
        return true;
    }
    else
    {
        alert(helpMsg);
        elem.focus();
        return false;
    }
}

function initiate {
    // ..
}
window.onload = initiate;

到目前为止，我只知道如何编写代码重定向到新的网页，但它不检查它是一个有效的代码。我用过这个:

HTML 

<form id="form">
Name:  <input type="text" id="name" /><br />
Email: <input type="text" id="email" /><br />
<input type="submit" value="Submit" />
</form>
Javascript 

document.getElementById("form").action = "page.html";

但我不知道如何写，使.action="page.html"和return validateForm()都工作。

您的表单需要一个id:

<form id="form">
Name:  <input type="text" id="name" /><br />
Email: <input type="text" id="email" /><br />
<input type="submit" value="Submit" />
</form>

单独的Javascript文件:

function initiate()
{
    var form = document.getElementById("form");
    form.action = "page.html";
    form.onsubmit = function validateForm()
    {
        var name = document.getElementById("name");
        var email = document.getElementById("email");

        if(isAlphabet(name, "Fill in name"))
        {
            if(emailValidator(email, "Fill in email"))
            {
                return true;
            }
        }
        return false;
    };
}
window.onload = initiate;

确保validateForm()函数返回false，如果没有验证。

相关文章：