外部JavaScript似乎没有连接到HTML页面

时间:2014-06-02 05:27:15

标签: javascript html

我试图使用外部JavaScript,但是当我运行我的html页面时,它看起来好像我的外部JavaScript工作正常。我不确定它是否是我在javascript中编码的,或者我是否还没有正确连接javascript。因为我想要在某些事情没有得到满足时发出警告信息,即电子邮件必须有@或邮政编码必须有4个号码。任何帮助将不胜感激。

这是我的HTML代码:

<html>
  <head>
    <script type="text/javascript" src="/new 2.js"></script>
  </head>
  <body>
    <form name="userForm" onsubmit= "return validateForm()"  method="post">
      Name: <input type="text" id="name" name="name" size="50" required />
      <br /><br />
      Address: <input type= "text" id="address" name="Address" size="50" required/>
      <br /><br />
      Postcode: <input type="text" id="postcode" name="postcode" size="4" required/>
      <br><br/>
      Email: <input type="text" id="email" name="email" required/>
      <br><br/>
      Credit Card Details:
      <br />
      <select name="Card Type">
        <option value="Visa">Visa</option>
        <option value="Mastercard">Mastercard</option>
        <option value="AMEX">AMEX</option>
      </select>
      <br><br/>
      <select name="Month">
        <option value="1">January</option>
        <option value="2">Febuary</option>
        <option value="3">March</option>
        <option value="4">April</option>
        <option value="5">May</option>
        <option value="6">June</option>
        <option value="7">July</option>
        <option value="8">August</option>
        <option value="9">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
      </select>  
      <br><br/>
      <select name="Year">
        <option value="2014">2014</option>
        <option value="2015">2015</option>
        <option value="2016">2016</option>
        <option value="2017">2017</option>
        <option value="2018">2018</option>
        <option value="2019">2019</option>
        <option value="2020">2020</option>
        <option value="2021">2021</option>
        <option value="2022">2022</option>
        <option value="2023">2023</option>
        <option value="2024">2024</option>
      </select>
      <br><br/>
      <input type="submit" name="Submit" value="Submit Form" /> 
      <br><br/>
      <input type="reset" name="Reset" Value="Reset Form">
    </form>
  </body>
</html>

这是我的外部Javascript:

function validateForm()
{
  if (document.getElementById("name").value=="")
  {
    alert("You cannot leave this field blank. Please enter your name");
  }
  else  
  {
    alert("field OK");
  }

  if (document.getElementById ("address").value ==="")
  {
    alert ("Please enter your address");
    document.getElementById ("address").focus();
    return false;
  }

  if (isNaN(document.getElementById("postcode").value.length<4))
  {
    alert ("Your postcode is not valid");
  }
  else 
  {
    alert ("You have entered your postcode correctly");
  }

  if (document.getElementById ("email").value.length<5 ||
      document.getElementById ("email").value.indexOf("@")== -1) {
    alert("Please enter your email min 5 chars and include @ symbol");
    document.getElementById("email").focus();
    return false;
  }
  {

  if (document.getElementById ("creditcard").value.length < 16)
  {
    alert("Please enter your Creditcard number");
    document.getElementById ("ccreditcard").focus();
    return false;
  }

  alert("Thank you for your submission!");
  return true;
}
}

2 个答案:

答案 0 :(得分:1)

如果我没弄错,你的文件名中有空格。例如,尝试将其更改为下划线,当然也要重命名文件..然后尝试从控制台执行validateForm(不带括号) ..如果脚本成功加载,它应该打印出函数的主体。

基本上你需要提供一个有效的URI(RFC 2396),有些浏览器存在空格问题 - 例如Chrome据我所知..如果你坚持要在文件名中留下空格,那么替换HTML中的空格为+符号,因此导入将如下所示

<script type="text/javascript" src="/new+2.js"></script>

编辑(回答特定的非全局问题):

我已经在我的机器上测试了导入,它没有任何问题。我已将JS文件放在HTML文件旁边,如下图所示

enter image description here

我已经使用了像这样的导入

<script type='text/javascript' src='javascript1.js'></script>

这是JS文件的相对路径。这意味着路径从HTML所在的位置开始,并从该位置遍历文件夹。换句话说,如果您在HTML旁边有一个名为“foo”的文件夹,并且JS文件位于其中,则应使用src='foo/javascript1.js'。如果JS文件位于HTML文件之上,那么src='../javascript1.js'。另一方面,如果您不想相对指定路径,则可以使用绝对路径,这是完整文件系统路径到所请求的JS文件。例如src='file:///C:/yourDocuments/Desktop/yourFolder/new_2.js'

请查看以下资源,了解有关相对和绝对路径的信息

http://webdesign.about.com/od/beginningtutorials/a/aa040502a.htm

http://www.boogiejack.com/server_paths.html

http://brugbart.com/paths

答案 1 :(得分:0)

你必须改变: -

<script type="text/javascript" src="new 2.js"></script>

它对我的工作......:)