Javascript 表单验证不起作用答案

【问题标题】：Javascript form validation isn't workingJavascript 表单验证不起作用
【发布时间】：2012-02-08 13:03:51
【问题描述】：

我正在用 JavaScript 编写表单验证脚本。提交表单后，我希望在进入下一页之前对其进行验证。

正在使用 Perl 交换从另一个页面调用此页面。对表单上的三个字段执行验证。

更新：这里是完整的代码：

    <FORM  ACTION="[process]" name="outofstock_form" METHOD=POST onsubmit="return      validate_outofstockform();" >
    <INPUT TYPE=hidden NAME="mv_todo"  VALUE="return">
    <INPUT TYPE=hidden NAME="mv_nextpage" VALUE="outofstock_wish_submit">
    <INPUT TYPE=hidden VALUE="[perl scratch session]$which_search;[/perl]" NAME="search_key">

    <script type=javascript>
        function validate_outofstockform() {
            var m = document.forms["outofstock_form"]["email"].value
            var e = document.outofstock_form.email.value
            var f = document.forms["outofstock_form"]["name"].value
            var p = documnet.forms["outofstock_form"]["wish_product"].value

            var atpos = e.indexOf("@");
            var dotpos = e.lastIndexOf(".");

            if (document.outofstock_form.email.value == "") {
                alert("The Email field is required.");
                return false;
            }
            if (document.outofstock_form.name.value == "") {
                alert("The Name field is required.");
                return false;
            }
            if (document.outofstock_form.wish_product.value == "") {
                alert("The Product field is required.");
                return false;
            }
            if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= e.length) {
                alert("Please enter a valid e-mail address");
                return false;
            }

            if (f == null || f == "" || f == "First Name") {
                alert("Please enter your first name");
                return false;
            }
            if (p == null || p == "" || p == "Product") {
                alert("Please enter your first name");
                return false;
            }
            return false;
        }
    </script>

    <br/>
    *Fields in bold are required.<br/>

    <table cellpadding="1" cellspacing="5" width="360px" border="0">
        <tr>
            <td><b>Name:</b></td>
            <td>
                <input type="text" id="name" name="name" size="40">
            </td>
        </tr>
        <tr>
            <td><b>E-mail:</b></td>
            <td>
                <input type="text" id="email" name="email" size="40">
            </td>
        </tr>
        <tr>
            <td>Phone:</td>
            <td>
                <input type="text" name="phone" size="40">
            </td>
        </tr>
        <tr>
            <td> State/ Province:</td>
            <td>[include pages/ord/widget_state.html]</td>
        </tr>
        <tr>
            <td > Zip/Postal Code:</td>
            <td><INPUT TYPE="text" NAME="zip" VALUE="" size="40" maxlength="10"></td>
        </tr>

        <br/>

        <tr>
            <td valign="bottom">Country:</td>
            <td>[include pages/ord/widget_country_s.html]</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>Salesperson:</td>
            <td align=left colspan=2>
                <SELECT NAME="salesrep" class="field">
                    <OPTION VALUE="WEB">(Optional)
                    [query list=1 prefix=s sql="SELECT id AS username, real_name AS disp_name, everest_id AS int_id FROM employee WHERE sales_ddown = 'Y' AND everest_id != '' ORDER BY real_name"]
                    <OPTION VALUE="[s-param int_id]"[calc]'[value salesrep]' eq '[s-param int_id]' ? 'selected' : '';[/calc]>[s-param disp_name]
                    [/query]

                </SELECT>
            </td>    

            <INPUT TYPE=hidden NAME="salesperson" VALUE="[s-param username]">
            [perl values scratch]
            $Scratch->{salesperson} = q{[s-param username]};
            [perl]   

        <tr>
            <td colspan="2">
            Provide us with the product you are looking for, or the brand and product type
            of interest and we will inform you if we find a match.
            </td>
            <td></td>
        </tr>

        <tr>
            <td><b>Product:</b></td>
            <td>
                <input type="text" id="wish_product" name="wish_product" size="40" value="">
            </td>
        </tr>
        <tr>
            <td>Item Description:</td>
            <td>
            <textarea name="wish_descrip" rows="2" cols="40"></textarea>
            </td>
        </tr>

        <tr>

        <tr>
            <td>Brand/Manufacturer Preference:</td>
            <td><input type="text" name="wish_man" size="40"></td>
        </tr>
        <tr>
            <td>Product Category :</td>
            <td>
            <select name="wish_cat">
            <option value="" selected>Any Category</option>
            [include pages/CATLIST.html]
            </select>
            </td>
        </tr>
        <tr>
            <td>Is this for a business?:</td>
            <td>
            <input type="radio" name="option" value="Yes"> Yes
            <input type="radio" name="option" value="No"> No<br>
            </td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td colspan="2"><font size="0px">
            We do not sell, rent or otherwise share your information with anyone.<br/>
            </font>
            </td>
            <td></td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>
            <input type="submit" name="Submit" value="Submit" class="button">
            </td>
        </tr>

    </table>

</form>

【问题讨论】：

您的验证功能一定有问题需要修复。我们需要看到它来帮助你。 “这个 html 也包含在其他 html 中。”没有意义？
您的input 提交按钮也应该是表单的一部分，不是吗？ 首先@rachel：如果你想让这个社区努力回答你的问题，你应该首先努力用相关的代码写出好的问题。
当 OP 甚至不关心正确缩进代码时，我拒绝提供帮助
@rachel: 你的validate_outofstockform 没有被调用，因为在你的form 元素中你引用了一个名为validate 的不同函数......或者你只是马虎并提供一些无效的代码，所以我们可以想象我们想要的任何东西......这是一个不可以提问的问题。你最终会靠自己...
使用 Firebug 逐步检查代码，看看它实际上做了什么。

标签： javascript html perl validation interchange

【解决方案1】：

使您的 JavaScript 有效（删除带有多个破折号的部分）并使其返回 false 以避免发送表单。

【讨论】：

你已经删除了多个破折号..return false 在哪里？

【解决方案2】：

很难说到底是什么导致了问题，因为您的代码中有几个错误。

几点建议：

您引用的是document.outofstock_form，而表单的名称是frm。
<//code table> 不是有效的 HTML。将其删除或替换为 HTML 注释（例如：）。
更常见的是使用正则表达式（在此处搜索 SO）来验证表单输入。
如果您将输入发送到服务器，请同时在服务器上执行验证。永远不要相信来自浏览器的输入。
您永远不会打开<tr>（可能是复制粘贴错误）。

最后，但最重要的是：

始终首先查看浏览器的 JavaScript 错误控制台。这必须是您调试 JavaScript 代码时的起点。它可以帮助您找到问题，如果没有，它可以帮助其他人帮助您。
阅读How to Ask。

【讨论】：

【解决方案3】：

你调试过你的代码吗？

使用 Firebug 等工具来调试您的脚本。在验证函数的第一行放置一个断点，然后逐步调试它。您最终会找到导致问题的线路。

关于如何改进验证器的建议

但除了调试之外，我会以不同的方式进行验证。而不是检查单个字段的每个方面，我宁愿只向那些需要验证的输入添加一个自定义属性，然后检查它们是否匹配。如果任何失败通知您的用户有关无效字段...

<input name="SomeName"
       validation-expression=".+"
       display-name="Required text field"
       type="text" />

在处理此类数据时，使用 jQuery 之类的库会更有帮助，因为枚举这些元素并处理它们的数据会更容易...我当然强烈建议您无论如何都使用 jQuery 因为它会让你的代码更加跨浏览器。这是一个简单的库，学习曲线短，但好处很大。

但是使用这些特殊属性将使您的验证器功能具有通用性，因此它可以与任何元素和任何页面一起使用。您所要做的就是为您的元素添加特定的验证属性。

当然只是一个建议。

【讨论】：

谢谢会这样做。我对java脚本没有太多经验。
@rachel：当您的代码出现问题时，只需尝试一个简化的概念验证示例，这样您就可以看到它是否有效。在它完全实现您的实际代码之后。但是由于这些操作/检查/验证有效，您的代码中肯定有错误。 调试肯定能解决这个问题。