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

我有以下代码作为到的接口。我想做的是用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>

产生
随机整数（最大10000）。

每个整数的值应介于
及

格式
柱。

选择您的基础：
2.
8.
10

还有剧本：

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

函数analert（）
{
警惕（“特拉拉拉”）；
}

---

我如何才能做到这一点，显示一个警告框，说号码超出范围，而不被重定向到random.org网站，告诉我号码超出范围

您可以从使用HTML5中定义的一些输入类型开始：

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

我在这里添加了一个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;
};

---

您可以从使用HTML5中定义的一些输入类型开始：

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

我在这里添加了一个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;
};

---

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

然而，我刚刚做了一个案例，您添加了进一步的验证 尝试任何负值生成它将给你错误和形式将不会被提交

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

函数检查（）{
如果（$（“#生成”）.val（）<0 |$（“#生成”）.val（）>10000）{
警报（“生成数量应小于10000”）；
返回；
}
//在此添加您的进一步条件
$（“#frmsub”）。单击（）；

---

}

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

然而，我刚刚做了一个案例，您添加了进一步的验证 尝试任何负值生成它将给你错误和形式将不会被提交

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

函数检查（）{
如果（$（“#生成”）.val（）<0 |$（“#生成”）.val（）>10000）{
警报（“生成数量应小于10000”）；
返回；
}
//在此添加您的进一步条件
$（“#frmsub”）。单击（）；

---

}

这是html，javascript在哪里，您尝试过如何解决这个问题？您可以做两件事1。在输入框中键入数字时检查验证，并禁用submitt按钮，直到确保所有验证，或2。不要将表单提交用作表单操作方法确实在提交时调用一个函数来检查是否确保了所有验证，如果是，则手动触发表单提交事件我添加了脚本，我的问题是它不会考虑任何脚本，它直接采取表单的操作并将我重定向到网站。事实上，我已经做了一些事情，所以-1是未绑定的。是的，因为表单操作，它产生了问题，等等，我更新了一个提琴来解决它。这是html，javascript在哪里，你试图做什么来解决这个问题？你可以做两件事1。在输入框中键入数字时检查验证，并禁用submitt按钮，直到确保所有验证，或2。不要将表单提交用作表单操作方法确实在提交时调用一个函数来检查是否确保了所有验证，如果是，则手动触发表单提交事件我添加了脚本，我的问题是它不会考虑任何脚本，它直接采取表单的操作并将我重定向到网站。事实上，我已经做了一些事情，所以-1是未绑定的。是因为表单操作，它产生了问题，等等，我更新了一个小提琴来解决它，但是这个验证不只是将我重定向到网站吗？就像在上面的HTML代码中添加脚本以显示任何类型的警报框一样，它将忽略它并重定向到表单的action字段中指定的链接。如何克服这一点，使代码显示警报，而不是忽略和重定向？HTML验证阻止表单发布-因此您必须在继续之前更正错误。JavaScript验证也是如此——当

返回false时从onsubmit事件中，它将阻止表单提交。这是两种技术的一个例子：但这种验证不只是将我重定向到网站吗？就像在上面的HTML代码中添加脚本以显示任何类型的警报框一样，它将忽略它并重定向到表单的action字段中指定的链接。如何克服这一点，使代码显示警报，而不是忽略和重定向？HTML验证阻止表单发布-因此您必须在继续之前更正错误。JavaScript验证也是如此——当
返回false时从onsubmit事件中，它将阻止表单提交。这是两种技术的一个例子：这很有意义。但是如果我这样做并为每个函数指定一个id，然后像这样编写脚本：
function check（）{if（$（“#generate”）.val（）<0 |$（“#generate”）.val（）>10000{alert（“generate number应该小于10000”）；return；}否则if（$（$（（$）.val（）<-100000000 | |（$）（“maxim”）.val（）>100000000）{alert（）(“数字应该在-1000000000到1000000000之间）；return；}//在这里添加进一步的条件$（“#frmsub”）。单击（）}
它不会显示最小值和最大值的警报。我在ID上添加了#，但仍然如此。因此它不会使用双重条件，请在将来帮助我解决一些问题