个人中心
gpt4 book ai didi

javascript 警报拒绝在表单验证中工作？

转载 作者：行者123 更新时间：2023-12-02 16:52:50 24 4
gpt4 key购买 nike

我一直在尝试一切让这些警报正确弹出。我一开始使用嵌套函数，然后将它们扔掉并将其全部放入一个函数中，现在当我在填写任何一个文本框后按 Enter 时，它什么也不做，只是将字符串放入 url 中，而不是像这样发出警报那是以前。我不确定这是我的函数调用还是其他任何东西，因为我仔细检查了所有内容，这一切似乎都对我有用。这是不执行任何操作的完整代码:

<html xmlns="http://www.w3.org/1999/xhtml">

<HEAD>
<TITLE>Smart Form </TITLE>
<SCRIPT LANGUAGE="JavaScript">

    <!-- VARIABLE DECLARATION -->

    f1.city.focus();

    function check_form()
    {   
        at_sign = email.search(/@/);

        if(document.f1.city.value.length < 1)
        {
            alert('Please enter a city');
            f1.city.focus();
        }
        else if(document.f1.state.value.length != 2 || !(state.charCodeAt('0')>=65 && state.charCodeAt('0')<=91))
        {
            alert('Please enter a state in abreviated form');
            f1.state.focus();
        }
        else if(document.f1.zip.value.length != 5 || document.f1.zip.value.isNaN()==true)
        {
            alert('Please enter a 5 digit zip code');
            f1.zip.focus();
        }
        else if((at_sign<1) || (email.length<3))
        {
            alert('Please enter a valid email address');
            f1.email.focus();
        }
        else
        {
            document.write("Form completed");   
        }

    }

</SCRIPT>
</HEAD> 

<BODY >

    <form name = "f1" action="smartform.html">
        <b>City</b>
        <input type = "text" name = "city" size = "18" value="" onSubmit = "javascript:check_form()">
        <b>State</b>
        <input type = "text" name = "state" size = "4" value="" onSubmit = "javascript:check_form()">
        <b>Zip Code</b>
        <input type = "text" name = "zip" size = "5" value="" onSubmit = "javascript:check_form()">
        <b>Email</b>
        <input type = "text" name = "email" size = "18" value="" onSubmit = "javascript:check_form()">

        <input type = "submit" name = "button" value = "Done" onclick = "javascript:check_form()">
    </form>


</BODY>
</HTML>

编辑:每个人都说的似乎没有任何效果..这是我的新代码:

<html xmlns="http://www.w3.org/1999/xhtml">

<HEAD>
<TITLE>Smart Form </TITLE>
<SCRIPT LANGUAGE="JavaScript">

    f1.city.focus();

    function check_form(f1)
    {   
        var at_sign = f1.email.search(/@/);

        if(f1.city.value.length < 1)
        {
            alert('Please enter a city');
            f1.city.focus();
            return false;
        }
        else if(f1.state.value.length != 2 || !(f1.state.charCodeAt('0')>=65 && state.charCodeAt('0')<=91))
        {
            alert('Please enter a state in abreviated form');
            f1.state.focus();
            return false;
        }
        else if((f1.zip.value.length != 5) || (f1.zip.value.isNaN()==true))
        {
            alert('Please enter a 5 digit zip code');
            f1.zip.focus();
            return false;
        }
        else if((at_sign<1) || (f1.email.length<3))
        {
            alert('Please enter a valid email address');
            f1.email.focus();
            return false;
        }
        else
        {
            //document.write("Form completed"); 
        }

        return false;

    }

</SCRIPT>
</HEAD> 

<BODY >

    <form name = "f1" onSubmit="return check_form(this)">
        <b>City</b>
        <input type = "text" name = "city" size = "18" value="">
        <b>State</b>
        <input type = "text" name = "state" size = "4" value="">
        <b>Zip Code</b>
        <input type = "text" name = "zip" size = "5" value="">
        <b>Email</b>
        <input type = "text" name = "email" size = "18" value="">

        <input type = "submit" name = "button" value = "Done" onclick = "return check_form(this)">
    </form>


    <b>hi</b>

</BODY>
</HTML>

仍然没有收到任何警报...我把它贴上来并得到了..但没有警报......

好吧，我知道我可能应该使用 getElementByID，但我的新重点是准确找出我的代码不起作用的原因。由于我的讲座大纲示例没有使用此方法，因此我想弄清楚为什么以下代码没有像以前那样激活警报。我将其简化为:

<!DOCTYPE html>
<html>
<HEAD>
<TITLE>Smart Form </TITLE>
<SCRIPT LANGUAGE="JavaScript">



function check_form()
{   
    document.write("Form started");

    var at_sign = document.f1.email.search(/@/);

    if(document.f1.city.value.length < 1)
    {
        alert('Please enter a city');
        document.f1.city.focus();
        //return false;
    }
    else if(document.f1.state.value.length != 2 || !(document.f1.state.charCodeAt('0')>=65 && document.f1.state.charCodeAt('0')<=91))
    {
        alert('Please enter a state in abreviated form');
        document.f1.state.focus();
        //return false;
    }
    else if(document.f1.zip.value.length != 5 || isNaN(document.f1.zip.value)==true)
    {
        alert('Please enter a 5 digit zip code');
        document.f1.zip.focus();
        //return false;
    }
    else if((at_sign<1) || (document.f1.email.value.length<3))
    {
        alert('Please enter a valid email address');
        document.f1.email.focus();
        //return false;
    }
    else
    {
        document.write("Form completed");   
    }   
}

</SCRIPT>
</HEAD> 

<BODY onLoad= "javascript:document.f1.city.focus();">

<form name = "f1" action="smartform1.html" onSubmit="javascript:check_form();">
    <b>City</b>
    <input type = "text" name = "city" size = "18">
    <b>State</b>
    <input type = "text" name = "state" size = "4">
    <b>Zip Code</b>
    <input type = "text" name = "zip" size = "5">
    <b>Email</b>
    <input type = "text" name = "email" size = "18">

    <input type = "submit" name = "button" value = "Done" onclick = "javascript:check_form();">
</form>




</BODY>
</HTML>

我在控制台中没有收到任何错误，现在当我输入某些内容时，我会立即出现测试行“表单已启动”，以及一些神秘的错误，然后它全部消失并显示表单。但我的问题是，为什么在得到这个结果的过程中没有发生警报？看起来即使页面被覆盖，它仍然应该弹出。另外，有没有办法在它到达被覆盖的点之前用代码/和/或调试来暂停它？所以我的基本问题是:为什么不弹出警报，以及如何让警报弹出并将焦点保留在 if/else 语句中函数停止的正确字段中？

更新 2:我对错误进行了快速屏幕截图，结果发现 f1.email 等未定义，并且确实导致该功能无法工作。所以我仍然想知道如何用代码或在调试器中暂停它，帖子和链接似乎并没有 100% 清楚。一旦我进入控制台并处于 Debug模式，我到底应该从哪里开始让程序在错误时暂停？

另外:如果我在 header 中的脚本顶部声明 getElementByID 变量，然后在函数中使用它们，是否应该在没有所有其他事件处理方法的情况下工作？我一边打字一边尝试这个。

最佳答案

您应该将提交监听器放在表单上并传递对表单的引用，并返回函数返回的任何值，例如

<form onsubmit="return check_form(this);" ...>

您应该使用控件的名称将控件作为表单的属性引用，不要将该名称用作全局变量。并声明所有变量。

所以函数看起来像:

function check_form(form) {

  var at_sign = email.search(/@/);

  if (form.city.value.length < 1) {
        alert('Please enter a city');
        f1.city.focus();

        // cancel submit by returning false
        return false;

    } else if (form.state.value.length != 2 || !(form.state.charCodeAt(0) >=65 && state.charCodeAt(0)<=91)) {
        alert('Please enter a state in abreviated form');
        f1.state.focus();
        return false;
    }

    ...
}

您可能应该使用正则表达式或查找来验证 state 值，而不是 charCodeAt。

在页面加载完成后(例如提交表单时)使用document.write将在写入新内容之前删除页面的整个内容。 p>

编辑

以下是您的新代码的问题:

<SCRIPT LANGUAGE="JavaScript">

去掉语言属性。它没有害处(嗯，在非常特殊的情况下可能是有害的)。

f1.city.focus();

f1 尚未定义或初始化(请参阅上面有关元素名称和全局变量的注释)

function check_form(f1)
{
    var at_sign = f1.email.search(/@/);

f1.email 是一个输入元素，它没有 search 属性，您无法调用它。它确实有一个 value 属性，它是一个字符串，也许您的意思是:

    var at_sign = f1.email.value.search(/@/);

然后是:

    else if(f1.state.value.length != 2 || !(f1.state.charCodeAt('0')>=65 && state.charCodeAt('0')<=91))

您再次忘记了三个表达式中的两个的value属性，并且忘记在第三个表达式中使用f1。你想要:

    else if(f1.state.value.length != 2 || !(f1.state.value.charCodeAt(0)>=65 && f1.state.value.charCodeAt(0)<=91))

请注意，这要求用户以大写字母输入状态，这可能有助于告诉他们这一点。

然后是:

    else if((f1.zip.value.length != 5) || (f1.zip.value.isNaN() == true))

isNaN 是一个全局变量，而不是字符串的方法。如果未输入任何值，则该值为空字符串，并且 isNaN('') 返回 false。如果您想测试是否已输入 5 位数字，请使用:

else if (!/^\d{5}$/test(f1.zip.value))

不需要测试 true，直接使用即可，也不需要对简单表达式进行分组:

    else if (f1.zip.value.length != 5 || isNaN(f1.zip.value))

最后，如果所有测试都通过:

    return false;

阻止表单提交。您可以省略此返回语句，返回undefined将使表单提交。或者如果您确实想要，则返回true。

关于javascript 警报拒绝在表单验证中工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26436253/

24 4 0
文章推荐： Firebase - 新控制台中我的帐户 secret 在哪里？
文章推荐： homebrew - 运行 brew services list 命令的问题
文章推荐： android - Unity 三星 Galaxy s2 首次触摸时出现滞后峰值
文章推荐： c# - 如何使用 Stub X509Certificate2 修复假货生成
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com