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

HTML Field Form validation with JavaScript

本文关键字：表单 验证 字段 HTML JavaScript 进行 使用      更新时间：2023-09-26

我有以下代码充当 http://www.random.org/integers/的接口。我想做的是验证所有表单字段并使用 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 网站？

您必须检查验证，然后决定是否提交表单

在小提琴中看到这里

但是我刚刚为一个案例做了，你添加了进一步的验证尝试生成它的任何负值都会给您错误，并且表单不会提交

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

}

您可以从使用 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;
};
相关文章：