Fatal编程技术网
  • javascript/
  • Javascript表单字段验证不起作用？

Javascript表单字段验证不起作用？

javascript validation forms

Javascript表单字段验证不起作用？,javascript,validation,forms,field,Javascript,Validation,Forms,Field,我正在为一个大学项目做一个简单的网站，其中一个要求是我有javascript来验证表单字段输入。我已经实现了一个我认为可行的解决方案（从W3C网站上删除了它），但它似乎根本不会运行 HTML页面如下所示： <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht

我正在为一个大学项目做一个简单的网站，其中一个要求是我有javascript来验证表单字段输入。我已经实现了一个我认为可行的解决方案（从W3C网站上删除了它），但它似乎根本不会运行

HTML页面如下所示：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Rubber Toy Dept. Inc. Ltd.</title>
    <link href="css/layout.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="scripts/java/validation.js"></script>
</head>

<body>
    <div  id="wrapper">
        <div id="header">
            <h1 id="headlines">Rubber Toy Dept. Inc. Ltd. </h1>
        </div>

        <div id="content">
            <div id="content-main">
                <form action="mailto:gt70@hw.ac.uk" onsubmit="return validate_form(thisform)"  method="post">
                    <table width="858" border="0px">
                        <tr>
                            <td>
                                <input type="checkbox" name="cb1" value="1"></input>
                            </td>
                            <td>
                                Daniel
                            </td>
                            <td>
                                &pound;90
                            </td>
                            <td>
                                <a href="productpages/daniel.xhtml"><img src="pics/daniel_sml.jpg" width="75" height="75" alt="Daniel"></img></a>
                            </td>
                        </tr>
                              <tr>
                            <td>
                                <input type="checkbox" name="cb2" value="1"></input>
                            </td>
                            <td>
                                Graeme
                            </td>
                            <td>
                                &pound;80
                            </td>
                            <td>
                                <a href="productpages/graeme.xhtml"><img src="pics/graeme_sml.jpg" width="75" height="75" alt="Graeme"></img></a>
                            </td>
                          </tr>
                              <tr>
                            <td>
                                <input type="checkbox" name="cb3" value="1"></input>
                            </td>
                            <td>
                                Lewis
                            </td>
                            <td>
                                &pound;10
                            </td>
                            <td>
                                <a href="productpages/lewis.xhtml"><img src="pics/lewis_sml.jpg" width="75" height="75" alt="Lewis"></img></a>
                            </td>
                          </tr>
                              <tr>
                            <td>
                                <input type="checkbox" name="cb4" value="1"></input>
                            </td>
                            <td>
                                Conor
                            </td>
                            <td>
                                &pound;1 (bargain!)
                            </td>
                            <td>
                                <a href="productpages/conor.xhtml"><img src="pics/conor_sml.jpg" width="75" height="75" alt="Conor"></img></a>
                            </td>
                          </tr>
                        </table>

                    <table width="858" border="0px">
                        <tr>
                            <td>
                                Username
                            </td>
                            <td>
                                <input type="text" name="username" id="username"></input>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                E-mail Address
                            </td>
                            <td>
                                <input type="text" name="email" id="email"></input>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Address
                            </td>
                            <td>
                                <input type="text" name="address" id="address"></input>
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td>
                                <input type="submit" name="submit" value="submit"></input>
                            </td>
                        </tr>
                    </table>
                </form>
            </div>

            <div id="w3c">
                <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
            </div>

            <div id="footer">
                <i>Coded and Designed by G.A Tinsdale, D. Scott and L. Mclean</i>
                </div>
            </div>

            <div id="bottom">
        </div>
    </div>  
</body>
对不起，如果我把代码放错了。。。我似乎不明白如何正确地做这件事：（

谢谢你的帮助

丹尼尔。

更新： 正如@Matthew Wilson正确指出的，您的验证文件存在404错误：

<script type="text/javascript" src="script/java/validation.js">
       ----------------------------------------^
应该是：

onsubmit="return validate_form(thisform)"
您是否已将脚本文件包含在页面的下面部分：
。下一步从表单的onsubmit中删除
验证.js:
，这是不需要的。如果它仍然不起作用，那么进行一些调试。粘贴一个警报（“表单已提交”）在验证表单函数中，查看它是否启动。如果没有，则需要找出原因，如果启动了，则在函数树的下一步发出警报，以了解发生了什么情况。

查看您提供的URL，您的脚本标记都错了

第7行

<script type="text/javascript" src="script/java/validation.js">
应该是

<script type="text/javascript" src="script/java/validation.js"></script>
第8行

<script>
应该是

<script type="text/javascript">
并删除第50行的额外脚本标记

</script>
的确如此。当您引用外部JS文件时，它的所有全局声明都会导入到页面的命名空间中，因此它们不需要以脚本名称作为前缀。好的，但这似乎仍然不起作用。我已将文件上载到这里，您可以自己检查吗？尝试加载Javascript文件时出现404错误。它似乎在说javascript中的with（field）行有错误？我不知道这是什么？“with”是一个非常糟糕的构造，可能会导致微妙的错误。但在这里它应该是可以的。顺便说一句，你的浏览器应该给你这个页面的错误消息，这些消息应该是“找不到对象：验证”。如果您没有收到有用的消息，请为此类工作使用更好的浏览器！注意此输出将帮助您更轻松地查明错误。现在已对其进行排序。感谢所有帮助您的人：）标记的默认类型始终为“text/javascript”“，如果没有它们，页面可能不符合标准，但它仍然可以使用HTML5。我认为您根本不需要type属性，但这是XHTML，因此它是此doctype的必需属性，尽管我认为它只影响HTML验证，因为现代浏览器仍将以JavaScript形式执行块。 
<script type="text/javascript">

</script>