Question

我正在尝试验证表单输入，但我的验证无效该字符串必须至少有一个字母或数字，
一个整数应该在0-11之间，并且应该选择至少一个水果但即使我不输入任何输入，它只是转到input_ok.html文件它需要弹出错误窗口。

这是我的代码：

function validateInput() {
    var str = myForm.inputString.value;
    var nbrStr = myForm.inputInteger.value;
    var nbr = parseInt(nbrStr);
    var fruit = myForm.fruit.value;
    if (str != "" && nbrStr != "" && fruit != "" && !isNaN(nbr) && nbr < 11) {
        return true;
    } else {
        var msg = "";
        var strError = false;
        if (str == "") {
            msg += "\nPlease enter a string with at least one letter or digit";
            strError = true;
        }
        if (nbrStr == "") {
            msg += "\nPlease enter  an integer in the range 0-11";
        } else if (isNaN(nbr)) {
            msg += "\nPlease enter an integer";
        } else if (nbr > 11) {
            msg += "\nPlease enter an integer less than 11";
        }
        if (strError) {
            myForm.inputString.focus();
        } else {
            myForm.inputInteger.focus();
        }
        alert(msg);
    }
    return false;
}

<body>
    <h1>Week 08, Exercise 01</h1>
    <form action="week08_01servlet" 
          method="post" 
          name="myForm" 
          onsubmit="return validateInput();">
        <p>Please enter the following information, 
        and then click the submit button.</p>
        <p class="indent">A string with at least one letter or digit
            <input type="text" name="inputString">
            <br>An integer in the range 0-11
            <input type="text" name="inputInteger">
            <br>Pick a fruit <select name="fruit">
                <option value="---">---
                <option value="apple">apple
                <option value="banana">banana
                <option value="cherry">cherry
                <option value="pear">pear
            </select></p>
        <p><input type="submit" value="Submit"></p>
        <input type="hidden" name="command" value="do_it">
    </form>
</body>

Answer 1

这显然是家庭作业，但我认为每个问题都应该得到答案。有效的xhtml5，用jslint检查javascript并用ajaxmin压缩。享受。

另外，您可能需要阅读ppks Introduction to Forms。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Week 08, Exercise 01</title>
    <link rel="stylesheet" href="Week08_01.css">
    <script>
    function validateInput(c){var f=c.inputString.value,d=c.inputInteger.value,b=parseInt(d,10),g=c.fruit.value;if(f!==""&&d!==""&&g!==""&&!isNaN(b)&&b>=0&&b<11)return true;else{var a="",e=false;if(f===""){a+="\nPlease enter a string with at least one letter or digit";e=true}if(d==="")a+="\nPlease enter  an integer in the range 0-11";else if(isNaN(b))a+="\nPlease enter an integer";else if(b<=0)a+="\nPlease enter a positive integer";else if(b>11)a+="\nPlease enter an integer less than 11";if(e)c.inputString.focus();else c.inputInteger.focus();alert(a);return false}}
    </script>
</head>
<body>
    <h1>Week 08, Exercise 01</h1>
    <form action="week08_01servlet" 
        method="post" 
        name="myForm"
        onsubmit="return validateInput(this);">
        <p>Please enter the following information, 
        and then click the submit button.</p>
        <p class="indent">A string with at least one letter or digit
            <input type="text" name="inputString" />
            <br>An integer in the range 0-11
            <input type="text" name="inputInteger" />
            <br />Pick a fruit <select name="fruit">
                <option value="---">---</option>
                <option value="apple">apple</option>
                <option value="banana">banana</option>
                <option value="cherry">cherry</option>
                <option value="pear">pear</option>
            </select></p>
        <p><input type="submit" value="Submit">
        <input type="hidden" name="command" value="do_it"></p>
    </form>
</body>
</html>

使用JavaScript进行表单验证

1 个答案: