使用JavaScript驗證HTML字段表格

我有以下代碼作爲http://www.random.org/integers/的接口。我想要做的是驗證所有的表單域，並用JavaScript顯示警報框等。一個例子是將數字設置在一定範圍內（在整數情況下是最小值和最大值），如果它們超出範圍，則顯示錶示數字必須在1和1000之間的框。使用JavaScript驗證HTML字段表格

我遇到的問題是表單直接將我發送到random.org網站，而沒有考慮到我的腳本，它甚至不會顯示它只是將它發送到他們的網站的警報框。

這是代碼。

<form method="get" action="http://www.random.org/integers/"> 

    <p> Generate 
     <input type="text" name="num" value="100" size="6" maxlength="5" /> 
        random integers (maximum 10,000). 
    </p> 

    <p>Each integer should have a value between 
     <input type="text" name="min" value="1" size="12" maxlength="10" /> and 
     <input type="text" name="max" value="100" size="12" maxlength="10" /> 

    </p> 

    <p>Format in 
     <input type="text" name="col" value="5" size="2" maxlength="6" /> columns. 
    </p> 
    <p> Choose your base: 
     <select name="base"> 
       <option value="2"> 2 </option> 
       <option value="8"> 8 </option> 
       <option value="10"> 10 </option> 
     </select> 

    </p> 


    <p> 
     <input type="submit" class="submit" value="Get Numbers" onsubmit="analert()" /> 
     <input type="reset" class="submit" value="Reset Form" /> 
     <input type="button" class="submit" value="Switch to Advanced Mode"/> 
    </p> 

    </form>

和腳本：

<script> 
function analert() 
{ 
alert("Tralalala"); 
} 
</script>

我怎樣才能使這項工作，顯示一個警告框，上面寫着數超出範圍，而不被重定向到random.org網站，告訴我該數字超出範圍？

來源

2013-11-01 Contourette.

這是html，javascript在哪裏，你試圖做什麼來解決這個問題？ –

你可以做兩件事情1.或者在輸入框中輸入數字時檢查驗證，並且在所有驗證都確保之前禁用submitt按鈕或者2.不要使用表單提交作爲表單操作方法確實在提交時調用一個函數來檢查所有驗證是確保，如果是手動觸發表單提交事件 –

我已經添加了腳本，我的問題是它不會考慮任何腳本，它會直接採取表單的操作並將我重定向到網站。事實上，我已經做了一些事情，所以-1是沒有固定的。 –

你必須檢查確認，然後再決定是否提交表單或不

see here in fiddle

但是我已經爲您添加您進一步驗證嘗試任何負值一個情況下，只需完成生成它會給你錯誤和形式將不會提交

function check(){ 
if($("#generate").val() < 0 || $("#generate").val() > 10000){ 
    alert("generate number should be less than 10000"); 
    return; 
} 
//add your further condition here 

$("#frmsub").click();

}

來源

2013-11-01 11:43:05

這很有道理。但是，如果我這樣做，併爲每個指定一個id，然後編寫它：「function check（）if（$（」＃generate「）.val（）<0 || $（」＃generate「）。 val（）> 10000）{ alert（「生成號碼應小於10000」）; return; （$（「minim」）.val（）<-1000000000 || $（「maxim」）.val（）> 1000000000）{ } alert（「該數字應該在-1,000,000,000和1,000,000,000之間）; 回報; } // 添加其他條件在這裏 $（「＃frmsub」）點擊（）;} '它不會爲最小顯示警報，最大的事情 –

謝謝......。 ....................--) –

我在ID上添加了＃但是仍然可以。 –

您可以通過使用一些HTML5定義的輸入類型開始：

<input type="number" name="num" maxlength="5" min="20" max="200" step="1" value="100" size="6" />

這裏我們說出一個min值（我假定20爲例子的目的），一個max值（同樣再次）和一個step - 這是每增量可以多少。

現代瀏覽器將驗證這一點，顯示適當的消息並突出顯示要更正的字段。

你可以任選還可以添加JavaScript驗證...

<form id="myForm" method="get" action="http://www.random.org/integers/">

我已經在這裏添加了一個ID，以避免傳染的形式使用JavaScript屬性。

var myForm = document.getElementById('myForm'); 
myForm.onsubmit = function() { 
    // You can code your own validation... 
    // return false to prevent submission 
    // If everything is okay... 
    return true; 
};

來源

2013-11-01 11:31:29 Fenton

但是，這不會驗證只是重定向我的網站？就像添加一個腳本來顯示任何類型的警告框到上面的HTML代碼一樣，它將忽略它並重定向到表單的action字段中指定的鏈接。你如何通過它並使代碼顯示警報而不忽略和重定向？ –

HTML驗證會阻止表單發佈 - 因此您必須先糾正錯誤，然後才能繼續。 JavaScript驗證也是一樣 - 當你從onsubmit事件返回false時，它將阻止表單提交。以下是兩種技術的示例：http://jsfiddle.net/8X2wy/ – Fenton

使用JavaScript驗證HTML字段表格

回答

相關問題