1

http://www.random.org/integers/へのインターフェイスとして機能する次のコードがあります。私がやりたいことは、すべてのフォーム フィールドを検証し、アラート ボックスなどを JavaScript で表示することです。例として、数値を特定の範囲内 (整数の場合は最小値と最大値) に設定し、範囲外の場合は、数値が 1 から 1000 の間でなければならないことを示すボックスが表示されます。

私が遭遇している問題は、フォームが自分のスクリプトを考慮せずに random.org Web サイトに直接送信され、Web サイトに送信されるだけの警告ボックスが表示されないことです。

これがコードです。

<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 Web サイトにリダイレクトされることなく、番号が範囲外であることを示す警告ボックスを表示するにはどうすればよいですか?

4

2 に答える 2

0

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/">

フォームが JavaScript 属性に感染するのを避けるために、ここに ID を追加しました。

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-01T11:31:29.033 に答える