表單驗證（JavaScript），不確定為什么不起作用。（沒有錯誤，但沒有出現消息框）

Question

基本上，我試圖向我的網站添加一個表單，然后單擊“確認/提交”按鈕，該程序會檢查“姓名和電子郵件”表單是否具有正確的信息，否則將顯示警告。

<script language="javascript" type="text/javascript">
function validateForm()
{
var x=document.forms["form1"]["name"].value;
if (x==null || x=="")
  {
  alert("Please enter your name");
  return false;
  }
}
function validateForm()
{
var x=document.forms["form1"]["e-mail"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
  {
  alert("Please enter your e-mail address");
  return false;
  }
}
</script>
</head>
<body>

    <h2>Form</h2>
    <p>Note: Please fill in the following fields below, thank you.</p>
    <form id="form1" name="form1" method="post" action="post">
      <p>
        <label for="name">Name:</label> 
        <br />
        <input type="text" name="name" id="name" />
      </p>
      <p>
        <label for="e-mail">E-mail:</label>
        <br />
<input type="text" name="e-mail" id="e-mail" />
      </p>
      <p>
        <label for="msg">Message:</label>
      </p>
      <p>
        <textarea name="msg" id="msg" cols="45" rows="5"></textarea>
      </p>
      <p>
        <input type="button" name="Confirm" id="Confirm" value="Submit" />
      </p>
      <!-- end .content -->
    </form>
  </div>
  <div class="sidebar2">
    <h4>&nbsp;</h4>
    <p>&nbsp;</p>
    <p><!-- end .sidebar2 --></p>
  </div>
  <div class="footer"> <img src="pics/copyright.gif" width="960" height="100" alt="footer" /></div>

<!-- end .container --></div>
</body>
</html>

Answer 1

只是縮進您的代碼，應該沒問題，我很樂意提供幫助，但是如果看不到代碼，我無能為力。 也許鏈接到您網站上的頁面？

Answer 2

在您的代碼中：

> <script language="javascript" type="text/javascript">

不推薦使用language屬性約15年，不再需要type屬性，因此：

<script>

> function validateForm () {
>     var x=document.forms["form1"]["name"].value;

從偵聽器傳遞對表單的引用很方便，因此該函數可以更通用。 此外，將命名表單控件添加為表單的命名屬性。 如果控件的名稱與form屬性相同，則它將覆蓋form屬性，因此您不能將其作為屬性訪問。 最好避免使用標准屬性名稱作為元素名稱和ID，因此：

function validateForm(form) {
    var x = form.userName.value

然后：

>     if (x == null || x == "") {

表單控件的值是一個字符串，因此x == null永遠不會為true。 測試就足夠了（並且更合適）：

    if (x == "") {

[...]

> function validateForm() {

如果您聲明多個具有相同名稱的函數，則每個函數都會覆蓋前一個函數，因此您只剩下最后一個。 您應該只有一個驗證功能來執行檢查，盡管每個檢查可能是一個單獨的功能。

> var x=document.forms["form1"]["e-mail"].value;
> var atpos=x.indexOf("@");
> var dotpos=x.lastIndexOf(".");
> if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
>   {
>   alert("Please enter your e-mail address");
>   return false;
>   }
> }

您可以使用正則表達式來檢查電子郵件地址的格式。

> <form id="form1" name="form1" method="post" action="post">

通常不需要表單上的ID和名稱屬性，通常只使用一個ID。 對於其他表單控件，要成功使用它們需要一個名稱，很少需要它們具有ID。

可以從表單的Submit事件中調用驗證函數，因此：

<form id="form1" onsubmit="validateForm(this);" ...>

[...]

>     <input type="text" name="name" id="name" />

不要在HTML文檔中使用XML標記。 並且不要使用與表單屬性名稱相同的元素名稱，因為它們會使相關的表單屬性無法訪問。

  </p>
  <p>
    <label for="e-mail">E-mail:</label>
    <br />

信息：

如果那是一個提交按鈕，則使其鍵入提交。 如果不需要提交，則不需要名稱或ID：

    <input type="submit" value="Submit">

因此，您的表格和代碼可以是：

function validateForm(form) {
    var reUserName = /\w+/; // User name has some letters
    var reEmail = /.+@..+\..+/;  // email has some characters, @, then a dot near the end
    var passed;

    if (!reUserName.test(form.userName.value)) {
        passed = false;
        // show message for user name
    }
    if (!reEmail.test(form.eMail.value)) {
        passed = false;
        // show message for email
    }
    return passed;
}

請注意，電子郵件驗證正是您所擁有的，並不是特別徹底。

然后是表格：

<form onsubmit="return validateForm(this);">
    Name: <input name="userName"><br>
    E-mail: <input name="eMail"><br>
    <input type="submit">
</form>

表單驗證（JavaScript），不確定為什么不起作用。（沒有錯誤，但沒有出現消息框）

問題描述

2 個解決方案

解決方案1
0 2013-05-15 21:10:41

解決方案2
0 已采納 2013-05-16 00:23:16

表單驗證（JavaScript），不確定為什么不起作用。 （沒有錯誤，但沒有出現消息框）

問題描述

2 個解決方案

解決方案1 0 2013-05-15 21:10:41

解決方案2 0 已采納 2013-05-16 00:23:16

表單驗證（JavaScript），不確定為什么不起作用。（沒有錯誤，但沒有出現消息框）

解決方案1
0 2013-05-15 21:10:41

解決方案2
0 已采納 2013-05-16 00:23:16