0

我是 JavaScript 新手，我需要一些帮助。我有一个表单和一些 JavaScript，但在输入错误范围时无法添加警告框。我希望显示一个警告框，输入范围在 1-80 之间，例如 81。

    <script type="text/javascript">
// hide from old browsers

if (top != self) {
     top.location = self.location.href
}

// end script hiding
</script>
<script type="text/javascript">
// hide from non scripting browsers

function chooseRandom(form) {

var m = parseInt(form.lower.value);

var n = parseInt(form.upper.value) - m;

var output = Math.round(Math.random() * n) + m;

form.result.value = output;

}
// Clears the form

function clearForm(form) {

    form.upper.value="";

    form.lower.value="";

    form.upper.focus();

    form.upper.select();

}
</script>
<script type="text/javascript">
// calculates range from 1 - 80
var browName = navigator.appName;
var SiteID = 1;
var ZoneID = 80;
var browDateTime = (new Date()).getTime();
</script>
4

2 回答 2

2

希望这就是您正在寻找的：

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
    function chooseRandom(form) {
    var m = parseInt(form.lower.value);
    var n = parseInt(form.upper.value) - m;
    var output = Math.round(Math.random() * n) + m;
    form.result.value = output;
    }
    function clearForm(formId) {
    var form = document.getElementById(formId);
    form.upper.value = "";
    form.lower.value = "";
    form.result.value = "";
    form.upper.focus();
    }
    function chooseResult(formId) {
    var form = document.getElementById(formId);
    var upperVal = parseInt(form.upper.value);
    var lowerVal = parseInt(form.lower.value);
    if(isNaN(lowerVal) || isNaN(upperVal) || (lowerVal < 1) || (upperVal > 80) || (lowerVal >= upperVal)) {
        alert("Value(s) out of range, must be 1 <= lower < upper <= 80");
        clearForm(formId);
    }
    else {
        //          alert("Values ok");
        chooseRandom(form);
    }
    }
</script>
</head>
<body>
<form id="form1" method="GET" action="">
    <p>Upper:</p><input id="upper" name="upper" type="number">
    <p>Lower:</p><input id="lower" name="lower" type="number">
    <p>Result:</p><input id="result" name="result" type="number">
    <button type="button" onclick="chooseResult('form1')">Choose result</button>
    <button type="button" onclick="clearForm('form1')">Clear form</button>
    <button type="submit">Submit form</button>
</form>
</body>
</html>
于 2013-04-19T14:19:14.477 回答
0

您必须将事件处理程序附加到输入。使用像 jQuery 这样的库要容易得多，您可能想对此进行调查。这是一个js解决方案。基本的代码流程是：

  1. 获取高级事件处理程序，以便我们可以检测任一输入的更改。
  2. 当事件触发时检查元素是否有一定的验证类
  3. 检查所有值是否可接受。否则警告用户。

http://jsfiddle.net/B6E4s/

if (document.body.addEventListener) {
    document.body.addEventListener('change', validate, false);
} else {
    document.body.attachEvent('change', validate); //for IE
}

function validate(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    if (target.className.match(/validateThis/)) {
        var lowerBoundVal = document.getElementById('lowerBound').value;
        var upperBoundVal = document.getElementById('upperBound').value;
        if (lowerBoundVal < 0) {
            alert('Enter # greater than 0');
        }
        if (upperBoundVal > 80) {
            alert('Enter # less than 81');
        }
    }
}
于 2013-04-19T14:14:34.703 回答