【问题标题】:Validate form with Javascript using onsubmit使用 onsubmit 使用 Javascript 验证表单
【发布时间】:2010-03-04 18:44:15
【问题描述】:

我有一个带有现有表单的网站,该网站向第三方网站 (foo.com) 提交电子邮件地址。现在我想在使用 Javascript 提交表单之前验证电子邮件输入字段。

我的 Javascript

function isValidEmailAddress(emailAddress) {
    var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
    return pattern.test(emailAddress);
}

function formCheck() {
    // Fetch email-value
  sEmail = document.myForm.recipientEmail.value ;
    // value empty?
    if (sEmail == 0)
        {
            alert('Enter Email-Address.');
            return false;
        }
    else
        {
            // value valid?
            if (!isValidEmailAddress(sEmail))
                {
                    alert('Enter valid Email-Address.');
                    return false;
                }
            else
                {
                    return true;
                }
        }
}   

现有的表单标签

<form name="myForm" action="http://foo.com" method="post" onsubmit="return formCheck();">

现有的电子邮件输入字段

<input type="text" class="form-text" name="email" id="recipientEmail">

现有的提交按钮

<input type="image" src="some_pic.gif" alt="OK" id="submit_form" onclick="document.onlineForm.submit();" value="send" name="submit_button"> 

现在,只要我点击提交按钮,表单就会提交,我的 Javascript 似乎被忽略了。我做错了什么?

【问题讨论】:

    标签: javascript javascript-events forms


    【解决方案1】:

    当您通过直接调用“submit()”提交表单时,就像您的按钮所做的那样,“onsubmit”处理程序不会被调用。

    您可以让提交按钮调用不同的函数:

    function doSubmit() {
      if (formCheck()) document.myForm.submit();
    }
    

    【讨论】:

    • 我使用了这个解决方案并添加了布尔返回值。如果使用 'onclick="return doSubmit();"' 时验证失败,这将阻止发布表单。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-12-02
    相关资源
    最近更新 更多