时间戳

首页 > 解决方案 > 在提交表单之前验证用户输入

javascript - 在提交表单之前验证用户输入

问题描述

我有这段代码来验证输入：

<script>
        function validate()
        {
            var firstName = document.form.fullname.value;
            var lastName = document.form.fullname.value;
            var email = document.form.email.value;
            var password = document.form.password.value;
            var conpassword = document.form.conpassword.value;

            if (firstName == null || firstName == "")
            {
                alert("Firstname  can't be blank");
                return false;
            } else if (lastName == null || lastName == "")
            {
                alert("Lastname can't be blank");
                return false;
            } else if (email == null || email == "")
            {
                alert("Email can't be blank");
                return false;
            } else if (password.length < 6)
            {
                alert("Password must be at least 6 characters long.");
                return false;
            }
        }
    </script>

这是我的表格：

<form name="form" action="<%=request.getContextPath()%>/register" method="post">

        <div class="container">
            <div class="left">
                <div class="header">
                    <h2 class="animation a1">Register now</h2>
                    <h4 class="animation a2">Enter information in field and create account!</h4>
                </div>
                <div class="form">
                    <input type="text" name="firstName" class="form-field animation a3" placeholder="Name...">
                    <input type="text" name="lastName" class="form-field animation a3" placeholder="Last name...">
                    <input type="email" name="email" class="form-field animation a3" placeholder="Email adress...">
                    <input type="password" name="password" class="form-field animation a4" placeholder="Password">
                    <button class="animation a6" value="Submit" type="submit">REGISTER</button>
                </div>
            </div>
            <div class="right"></div>
        </div>
    </form>

如何在我的表单中实现该功能？因为现在当我单击提交时，在我的数据库中添加了一个空用户。我想补充一点，如果没有正确填写，它会在每个字段中抛出一个错误

标签： javascriptjsp

解决方案

  1. 您可以通过在表单 html 标记中添加“onsubmit”来执行 validate 函数（请参阅此处 w3 Schools 在提交时执行函数：onsubmit in forms）

  2. 至于错误，在执行代码时，函数无法读取未定义的属性“值”。所以发生的事情是你告诉 validate 函数从表单中取出它找不到的部分（全名和密码未定义）。

查看表单的字段名称标签，然后在 validate 函数中引用这些名称。因此，当声明 firstName 而不是document.form.fullname.value尝试document.form.firstName.value在表单中引用时。在表单中使用他们的名字对名字和姓氏执行此操作，并删除（或注释掉）conpassword 变量。

推荐阅读