表单和输入验证

Form and input validation

本文关键字：验证 输入 表单      更新时间：2023-09-26

我正在尝试在form标记中获取两个输入，如果其中任何一个为空，则会显示错误消息。

我去了w3schools并尝试了他们的代码，但它不起作用。（见下文）

HTML

<form name="myForm"  onsubmit="return validateForm()" method="post">
    Name: <input type="text" name="fname">
    <input type="submit" value="Submit">
</form>

Js

function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
       alert("Name must be filled out");
       return false;
    }
}

我从代码中删除了action="demo_form.asp"，因为我的老师告诉我要

这是我的代码
HTML

<div class="loginShite">
    <form name="username" onsubmit="return validateForm()" method="post">
        <input type="text" name="username" placeholder="@Username" /> 
        <input type="password" name="password" placeholder="Password" /> 
        <br />
    </form>
    <div class="loginButton">
        <a href="#homePage">
           <input type ="button" value="login" />
        </a>
    </div>
</div>

Js

function validateForm() {
    var x = document.forms["username"]["password"].value;
    if (x == null || x == "") {
       alert("Name must be filled out");
       return false;
    }
}

如果有人能告诉我做错了什么，或者给我指明解决问题的正确方向，我将不胜感激。

提前谢谢。

使用type="submit"而不是type="button"，它可以很好地进行

<head>
    <script>
        function validateForm() {
            var x = document.forms["username"]["password"].value;
            if (x == null || x == "") {
                alert("Name must be filled out");
                return false;
            }
        }
    </script>
</head>
<body>
    <div class="loginShite">
        <form name="username" onsubmit="return validateForm()" method="post">
            <input type="text" name="username" placeholder="@Username" /> 
            <input type="password" name="password" placeholder="Password" /> <br   
                />
            <div class="loginButton"><a href="#homePage">
                 <input type ="submit" value="login" /></a></div> </a></div> 
        </form>
    </div>
</body>

<!DOCTYPE html>
<html>
<head>
    <script>
        function validate(evt){
            var theEvent = evt || window.event;
            var key = theEvent.keyCode || theEvent.which;
            key = String.fromCharCode( key );
            var regex = /[0-9]|'./;
            if( !regex.test(key) ) {
                theEvent.returnValue = false;
                if(theEvent.preventDefault) theEvent.preventDefault();
            }
        }
        function validateForm(){
            var fname = document.getElementById("fname").value;
            if(fname == ""){
                alert("Please Enter first name");
                return false;
            }
            var lname = document.getElementById("lname").value;
            if(lname == ""){
                alert("Please Enter last name");
                return false;
            }
            var mnumber = document.getElementById("mnumber").value;
            if(mnumber == ""){
                alert("Please Enter Mobile no");
                return false;
            }
            if((mnumber.length <10)){
                alert("Please Enter 10 DIGIT mobile no");
                return false;
            }
            if((mnumber.length >10)){
                alert("Please Enter 10 DIGIT mobile no");
                return false;
            }
            var message = document.getElementById("message").value;
            if(message == ""){
                alert("Please Enter Message");
                return false;
            }
        }
    </script>
</head>
<body>
    <form onsubmit="return validateForm()" name="form" id="form" action="" method="post">
        <input type="text" name="fname" id="fname" placeholder="fname" />
        <br />
        <input type="text" name="fname" id="lname" placeholder="lname" />
        <br />
        <input type="text" name="mnumber" id="mnumber" placeholder="mnumber" onkeypress="validate(event)" />
        <br />
        <input type="text" name="message" id="message" placeholder="message" />
        <br />
        <input type="submit" value="Submit">
    </form>
</html>
</body>

以下是我的操作方法。您需要确保按钮的输入类型为"提交"，否则表单不会将其视为提交的触发器。然后您需要使用||条件来测试这两个字段条件是否为空。您可以通过添加trim（）方法来保护它，以避免任何意外的空白被接受

这是HTML

 <form onsubmit="return validate()" action="" class="form-group">
<div style="margin-top:2%">
  <div class="col-md-4"> // bootstrap
    <input type="text" id="uname" placeholder="user name"><br>
    <input type="password" id="pass" placeholder="password"><br>
    <input type="submit" class="btn btn-primary"><br><br>
    <p id="demouname"></p>
    <p id="succesuname"></p>
  </div>
</div>

这是JS

function validate() {
  var username = document.getElementById("uname");
  var password = document.getElementById("pass");
  if (username.value.trim() == "" || password.value.trim() == "") {
    document.getElementById("demouname").style.display = "block";
    document.getElementById("demouname").innerHTML = "No Empty Values Allowed";
    return false;
  } else {
    document.getElementById("succesuname").style.display = "block";
    document.getElementById("succesuname").innerHTML = "Success";
    true;
  }
}

以及一些用于添加样式的基本css

    #demouname {
  display: none;
  padding: 10px;
  border: solid red 1px;
  background-color: rgba(250, 232, 232, 0.2);
  color: red;
  border-radius: 5px;
  -webkit-animation: shadow-drop-2-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: shadow-drop-2-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
#succesuname {
  display: none;
  padding: 10px;
  border: solid green 1px;
  background-color: rgba(251, 252, 251, 0.521);
  color: green;
  border-radius: 5px;
  -webkit-animation: shadow-drop-2-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: shadow-drop-2-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
}
@-webkit-keyframes shadow-drop-2-center {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    -webkit-transform: translateZ(50px);
    transform: translateZ(50px);
    box-shadow: 0 0 20px 0px rgba(255, 255, 255, 0.35);
  }
}
@keyframes shadow-drop-2-center {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    -webkit-transform: translateZ(50px);
    transform: translateZ(50px);
    box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
  }
}

您的按钮类型应该是"submit"，并且应该在</form>标记内。查看表单标记名称，并查看JavaScript如何从表单标记中获取值。

更新

<!doctype html>
<html>
  <script type="text/javascript">
function validateForm() {
    var x = document.yourFormName.username.value;
    var y = document.yourFormName.password.value;
    if (x == "" || y == "" )
    {
        alert("Name must be filled out");
        return false; 
    }
} 
  </script>
 </head>
 <body>
<form name="yourFormName" onsubmit="return validateForm(this.form)" method="post">
    <input type="text" name="username" placeholder="@Username" />
    <input type="password" name="password" placeholder="Password" />
    <a href="#homePage"><input type ="submit" value="login" /></a>
</form> 
 </body>
</html>

实际上，您所要做的就是将required放在第一个input标记的末尾。例如：

<form>
<input type=“text” required>some text</input>
<!—-some other input—->
<input type=button>submit</input>
</form>

我认为这应该奏效。

相关文章：