我有以下代码作为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网站,该网站告诉我该号码超出范围?
答案 0 :(得分:1)
您必须检查验证,然后决定是否提交表单
但是我刚刚为一个案例添加了您的进一步验证 尝试任何负值生成它会给你错误,表格将不会被提交
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();
}
答案 1 :(得分: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/">
我在此处添加了一个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;
};