基本的JavaScript验证不起作用

时间：2014-05-16 13:47:38

标签： javascript html forms validation

我正在尝试使用JavaScript验证创建一个简单的表单。它有四个字段：标题，电子邮件地址，评级和评论。据我所知，我在这里的代码应该用于验证表单，我不应该被允许提交它，但每当我按下提交按钮时，没有任何提示出现，浏览器提交表单。有人能让我知道我哪里出错吗？我想象有一个简单的解决方案或者我忘记的东西但是我对此很新，所以如果它是非常明显的话就道歉。

HTML和JavaScript代码是：

       <html>

       <head>   

       <script type="text/javascript">
        function validateForm()
        {           
        var e=document.forms["review"]["Title"].value;
        var s=document.forms["review"]["Email"].value;
        var t=document.forms["review"]["Rating"].value;
        var c=document.forms["review"]["Comments"].value;

        var atsym=s.indexOf("@");
        var dotsym=s.lastindexOf(".");

        if (e==null || e=="") 
    {
     document.getElementById("valAlert").innerHTML="Please Enter a Title";
     return false;
    }

        else if (s==null || s=="" || atsym<1 || dotsym<atsym+2 || dotsym+2>=s.length) 
    {
    document.getElementById("valAlert").innerHTML="That is not a valid email address!";           
    return false;
    }

        else if (t=="0") 
    {
    document.getElementById("valAlert").innerHTML="You must enter a rating";
    return false;
    }

        else if (c==null || c=="") 
    {
    document.getElementById("valAlert").innerHTML="You need to enter some kind of comment.";
    return false;
    }

        else 
    {
    alert ("Your review of " + t + "has been submitted!");
    }
      }

    </script>
    </head>

    <body>
    <div id="valAlert"></div>
        <form name="review" onsubmit="return validateForm()">
        <fieldset>
            Enter Title:
            <input type="text" name="Title">
            </br>
            </br>
            Enter Email Address:
            <input type="text" name="Email">
            </br>
            </br>
            Please Enter Your Rating:
            <select name="Rating">
            <option value="0">(Please select a rating)</option>
            <option value="1S">1 Star</option>
            <option value="2S">2 Stars</option>
            <option value="3S">3 Stars</option>
            <option value="4S">4 Stars</option>
            <option value="5S">5 Stars!</option>
            </select>
            </br>
            </br>
            <textarea name="Comments" rows="8" colspan="40">Comments:</textarea>
            </fieldset>
            </br>
            </br>
        <fieldset>
        <input class="button" type="submit" value="Submit"/>
        </fieldset>
</form>

</body>

3 个答案:

答案 0 :(得分：1)

请在执行以下操作之前进行空值检查

var dotsym=s.lastindexOf(".");

为变量添加空检查＆＃39;。请检查下面的函数命名约定

obj.lastindexOf(); TO obj.lastIndexOf(".");

答案 1 :(得分：0)

您已经说过没有错误，但是当表单提交并且控制台被清除时，您可能只是错过了它们。

如果您使用的是Chrome / Chromium，则可以在开发者工具的“来源”标签中启用中断异常（最右侧的图标应为紫色或蓝色）：

Screenshot of Chrome Developer Tools

在Firefox中，它位于“调试器选项”菜单中：

Screenshot of Firefox Developer Tools

The menu

正如@Rajesh所说，lastindexOf上的外壳是错误的;它应该是lastIndexOf。

现在，让我们解决其他问题，从格式化开始：

<html>
    <head>
        <script type="text/javascript">
        function validateForm()
        {
            var e = document.forms["review"]["Title"].value;
            var s = document.forms["review"]["Email"].value;
            var t = document.forms["review"]["Rating"].value;
            var c = document.forms["review"]["Comments"].value;

            var atsym = s.indexOf("@");
            var dotsym = s.lastIndexOf(".");

            if (e == null || e == "")
            {
                document.getElementById("valAlert").innerHTML = "Please Enter a Title";
                return false;
            }

            else if (s == null || s == "" || atsym < 1 || dotsym < atsym + 2 || dotsym + 2 >= s.length)
            {
                document.getElementById("valAlert").innerHTML = "That is not a valid email address!";
                return false;
            }

            else if (t == "0")
            {
                document.getElementById("valAlert").innerHTML = "You must enter a rating";
                return false;
            }

            else if (c == null || c == "")
            {
                document.getElementById("valAlert").innerHTML = "You need to enter some kind of comment.";
                return false;
            }

            else
            {
                alert("Your review of " + t + " has been submitted!");
            }
        }
        </script>
    </head>

    <body>
        <div id="valAlert"></div>

        <form name="review" onsubmit="return validateForm()">
            <fieldset>
                Enter Title:
                <input type="text" name="Title" />
                </br>
                </br>

                Enter Email Address:
                <input type="text" name="Email" />
                </br>
                </br>

                Please Enter Your Rating:
                <select name="Rating">
                    <option value="0">(Please select a rating)</option>
                    <option value="1S">1 Star</option>
                    <option value="2S">2 Stars</option>
                    <option value="3S">3 Stars</option>
                    <option value="4S">4 Stars</option>
                    <option value="5S">5 Stars!</option>
                </select>
                </br>
                </br>

                <textarea name="Comments" rows="8" colspan="40">Comments:</textarea>
            </fieldset>

            </br>
            </br>

            <fieldset>
                <input class="button" type="submit" value="Submit" />
            </fieldset>
        </form>
    </body>

您错过了DTD和结束</html>，因此请添加：

<!DOCTYPE html>

<html>
    …
</html>

接下来，</br>不存在。它是<br />。

<form name="review" onsubmit="return validateForm()">
    <fieldset>
        Enter Title:
        <input type="text" name="Title" />
        <br />
        <br />

        Enter Email Address:
        <input type="text" name="Email" />
        <br />
        <br />

        Please Enter Your Rating:
        <select name="Rating">
            <option value="0">(Please select a rating)</option>
            <option value="1S">1 Star</option>
            <option value="2S">2 Stars</option>
            <option value="3S">3 Stars</option>
            <option value="4S">4 Stars</option>
            <option value="5S">5 Stars!</option>
        </select>
        <br />
        <br />

        <textarea name="Comments" rows="8" colspan="40">Comments:</textarea>
    </fieldset>

    <br />
    <br />

    <fieldset>
        <input class="button" type="submit" value="Submit" />
    </fieldset>
</form>

下面：

var e = document.forms["review"]["Title"].value;
var s = document.forms["review"]["Email"].value;
var t = document.forms["review"]["Rating"].value;
var c = document.forms["review"]["Comments"].value;

属性是有效的JavaScript标识符，因此您可以使用点语法编写它们：

var e = document.forms.review.Title.value;
var s = document.forms.review.Email.value;
var t = document.forms.review.Rating.value;
var c = document.forms.review.Comments.value;

你也应该给他们更明确的名字;我认为你在上一个alert中使用了错误的一个，这将有所帮助：

var title = document.forms.review.Title.value;
var email = document.forms.review.Email.value;
var rating = document.forms.review.Rating.value;
var comments = document.forms.review.Comments.value;

接下来，当你else return案件if时，你不需要value，所以你可以删除它们。文本输入的null永远不会是valAlert，因此请停止检查。它还会节省一些打字（或复制）以保持var atsym = email.indexOf("@"); var dotsym = email.lastindexOf("."); var valAlert = document.getElementById("valAlert"); if (title === "") { valAlert.innerHTML = "Please Enter a Title"; return false; } if (atsym < 1 || dotsym < atsym + 2 || dotsym + 2 >= s.length) { valAlert.innerHTML = "That is not a valid email address!"; return false; } if (rating == "0") { valAlert.innerHTML = "You must enter a rating"; return false; } if (comments == "") { valAlert.innerHTML = "You need to enter some kind of comment."; return false; } alert("Your review of " + title + " has been submitted!"); 为变量。

<!DOCTYPE html>

<html>
    <head>
        <title>HTML5 validation</title>
    </head>

    <body>
        <form>
            <fieldset>
                <label>
                    Enter title:

                    <input type="text" name="title" required />
                </label>

                <label>
                    Enter e-mail address:

                    <input type="email" name="email" required />
                </label>

                <label>    
                    Please enter your rating:
                    <select name="rating" required>
                        <option>(Please select a rating)</option>
                        <option value="1S">1 Star</option>
                        <option value="2S">2 Stars</option>
                        <option value="3S">3 Stars</option>
                        <option value="4S">4 Stars</option>
                        <option value="5S">5 Stars!</option>
                    </select>
                </label>

                <textarea name="comments" rows="8" cols="40" placeholder="Comments" required></textarea>
            </fieldset>

            <fieldset>
                <button class="button">Submit</button>
            </fieldset>
        </form>
    </body>
</html>

瞧！可是等等;还有更多。 life web开发中最好的东西不需要JavaScript，这也不例外。

{{1}}

答案 2 :(得分：-1)

我不同意你的意见。您收到控制台错误。特别是，只要你尝试在s上运行解析器并且s为空，它就会出错。在验证它具有值后，您需要将逻辑移动到if子句中：

else if (s == null || s == "") {
    document.getElementById("valAlert").innerHTML = "Please enter an email address";
    return false;
}
else if (s.indexOf("@") < 1 || s.lastindexOf(".") < s.indexOf("@")+ 2 || s.lastindexOf(".")+ 2 >= s.length) {
    document.getElementById("valAlert").innerHTML = "This is not a valid email address!";
    return false;
}

这是Fiddle

相关问题
最新问题