Fatal编程技术网

基本JavaScript验证不起作用

javascript html forms validation

基本JavaScript验证不起作用,javascript,html,forms,validation,Javascript,Html,Forms,Validation,我正在尝试使用JavaScript验证创建一个简单的表单。它有四个字段：标题、电子邮件地址、评级和评论。据我所知，我这里的代码应该用于验证表单，我不应该被允许提交表单，但每当我按下提交按钮时，都不会出现任何提示，浏览器会提交表单。有人能告诉我哪里出了问题吗？我会想象有一个简单的解决方案或是我忘记的东西，但我对这一点很陌生，所以如果是非常明显的事情，我道歉 HTML和JavaScript代码为： <html> <head>

我正在尝试使用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>

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

var dotsym=s.lastindexOf(".");
添加变量“s”的空检查。请检查下面的函数命名约定

obj.lastindexOf(); TO obj.lastIndexOf(".");
我对你的评论不敢苟同。您将收到控制台错误。特别是，每当您尝试在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;
}
这里有一个

您说过没有错误，但是当表单提交并且控制台被清除时，您可能会丢失这些错误

如果您使用的是Chrome/Chrome，您可以在开发者工具的Sources选项卡中启用breaking on exceptions。最右侧的图标应为紫色或蓝色：

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

正如@Rajesh所说，你在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>
属性是有效的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;
你可能也应该给他们更清楚的名字；我认为您在上次警报中使用了错误的警报，这将有助于：

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;
其次，无论发生什么情况，当您从if案例返回时，您都不需要ELSE，因此您可以放弃这些。文本输入的值永远不能为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!");
瞧！但是等待；还有更多。生活中最好的东西web开发不需要JavaScript，这也不例外

<!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>
你检查过你的控制台有没有错误吗？是的，我没有发现任何错误。请不要。文本字段的值不能为空。关于套管，你是对的。从什么时候开始indexOf对空管柱不起作用了？另外，试着摆弄一下电子邮件地址foo@.The字段的值未定义，不是空字符串。它抛出了一个控制台错误。如果您按照小提琴图所示重新排列，它将起作用。s是电子邮件字段。它不能有null或未定义的值。关于传递foo@. 我没有修改OP用于验证的逻辑。我只是重新安排了它，这样它就不会出错。这不是通过，这是错误。检查你的控制台。最后的索引。不过，这并不重要。非常感谢您的回答，当我修复“lastIndexOf”语法时，验证运行正常。@denisq91：那么，您不应该接受Rajesh的回答吗？Bic的是错误的。@denisq91:另外，请仔细看一下这篇文章的结尾；如果这不仅仅是JavaScript实践，那么您应该真正使用。 
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;

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>