Проверка формы с помощью JavaScript - PullRequest
Новая
       4

Проверка формы с помощью JavaScript

0 голосов
/ 05 декабря 2010

Я пытаюсь проверить ввод формы, но моя проверка не работает.
Строка должна содержать хотя бы одну букву или цифру,
целое число должно быть в диапазоне от 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>

1 Ответ

2 голосов
/ 05 декабря 2010

Это явно домашнее задание, но я полагаю, что каждый вопрос заслуживает ответа.Допустимый xhtml5, javascript проверен с помощью jslint и сжат с помощью ajaxmin.Наслаждайтесь.

Кроме того, вы можете прочитать ppks Введение в формы . 

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...