javascript - 使用 JavaScript 进行 HTML 字段表单验证

Question

我有以下代码作为 http://www.random.org/integers/ 的接口(interface)。我想做的是使用 JavaScript 验证所有表单字段并显示警报框等。一个示例是将数字设置在特定范围内(在整数情况下为最小值和最大值)，如果超出范围，则显示一个框，说明该数字必须在 1 到 1000 之间。

我遇到的问题是，表单直接将我发送到 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 网站，告诉我号码超出范围？

Answer 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();

}