如何使用java脚本验证Form

How to validate Form using java Scripts

本文关键字：验证 Form 脚本 java 何使用      更新时间：2023-09-26

我正在尝试使用java脚本验证表单，但它不起作用。

这是我的代码，它不能正常工作。

我已经试过很多次了，但它并没有给我任何警告，即使我给出了错误的值。

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<%ResultSet resultset =null;%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<script type= "text/javascript" src = "countries.jsp"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Registration Form</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css"
href="css/bootstrap-responsive.css">
<link rel="stylesheet" type="text/css"
href="css/bootstrap-responsive.min.css">
<script type="text/javascript">  
function validate()
{
      if(form.firstname.length==1) {
          alert("Error: Input is empty!");
          form.firstname.focus();
          return false;
        }
}
</script>
</head>
<body>
<h1 align="center">
<b>REGISTRATION FORM</b>
</h1>
<form action="welcome.jsp" method="post"  onsubmit="return validate()">
<div align="center">
<label for="inputFirstname">First Name
</label>
<div>
<input type="text" name="firstname" 
placeholder="firstname" ></input>
</div>
</div>
<div align="center">
<label for="inputLastname">Last Name </label>
<div>
<input type="text" name="lastname" maxlength="12"
placeholder="lastname"></input>
</div>
</div>
<div align="center">
<label for="inputMobile">Mobile</label>
<div>
<input type="text" name="mobile" maxlength="10"
placeholder="Ex:95xxxx4104"></input>
</div>
</div>
<div align="center">
<div>
Select Country:<select id="country" name ="country">
<option value="volvo">India</option>
  <option value="saab">Pakistan</option>
  <option value="mercedes">Austrelia</option>
  <option value="audi">Audi</option>
</select>
</div>
<div>
Select State:<select name ="state" id ="state"></select>
</div>
 <div>
 </div>
<div align="center">
<label for="inputEmail">E-mail</label>
<div>
<input type="text" name="email" maxlength="50"
placeholder="rakesh@gmail.com"></input>
</div>
</div>
<div align="center">
<label for="gender">Gender</label>
<div>
<input type="radio" name="optionsRadios" id="optionsRadios1"
value="Male" checked>Male <input type="radio"
name="optionsRadios" id="optionsRadios2" value="Female">Female
</div>
</div>
<div align="center">
<label for="inputAddress">Address </label>
<div>
<input type="text" name="address" maxlength="70" id="address"
placeholder="Address"></input>
</div>
</div>
<div align="center">
<label for="inputCity">City </label>
<div>
<input type="text" name="city" id="city" placeholder="Noida"></input>
</div>
</div>
<div align="center">
<label for="inputState">State </label>
<div>
<input type="text" id="state" name="state" id="state"
placeholder="Delhi"></input>
</div>
</div>
<div align="center">
<div>
<input type="reset" value="Reset" /> 
<input type="submit" value="Submit" onclick="validate()"/>
</div>
</div>    </form>
</body>
</html>
</body>
</html>

请帮帮我。

尝试这个

对我来说，它在实时页面中工作

<html>
<head>
  <title>Form Validation</title>

  <script type="text/javascript">
    function validate() {
      if (document.myForm.Name.value == "") {
        alert("Please provide your name!");
        document.myForm.Name.focus();
        return false;
      }
      if (document.myForm.EMail.value == "") {
        alert("Please provide your Email!");
        document.myForm.EMail.focus();
        return false;
      }
      if (document.myForm.Zip.value == "" ||
        isNaN(document.myForm.Zip.value) ||
        document.myForm.Zip.value.length != 5) {
        alert("Please provide a zip in the format #####.");
        document.myForm.Zip.focus();
        return false;
      }
      if (document.myForm.Country.value == "-1") {
        alert("Please provide your country!");
        return false;
      }
      return (true);
    }
  </script>
</head>
<body>
  <form name="myForm" onsubmit="return(validate());">
    <table cellspacing="2" cellpadding="2" border="1">
      <tr>
        <td align="right">Name</td>
        <td>
          <input type="text" name="Name" />
        </td>
      </tr>
      <tr>
        <td align="right">EMail</td>
        <td>
          <input type="text" name="EMail" />
        </td>
      </tr>
      <tr>
        <td align="right">Zip Code</td>
        <td>
          <input type="text" name="Zip" />
        </td>
      </tr>
      <tr>
        <td align="right">Country</td>
        <td>
          <select name="Country">
            <option value="-1" selected>[choose yours]</option>
            <option value="1">USA</option>
            <option value="2">UK</option>
            <option value="3">INDIA</option>
          </select>
        </td>
      </tr>
      <tr>
        <td align="right"></td>
        <td>
          <input type="submit" value="Submit" />
        </td>
      </tr>
    </table>
  </form>
</body>
</html>

首先，代码中存在不正确的封闭标记你不需要关闭input标签，如果你想这样做，那么

而不是这个

<input type="text" id="state" name="state" id="state" placeholder="Delhi"></input>

做这个

<input type="text" id="state" name="state" placeholder="Delhi" />

此外，您使用的是双id attributes，而不仅仅是输入标签，您还有更多重复的标签。

对于JavaScript验证，您可以执行类似的操作

<script type="text/javascript">  
function validate()
{       
        var inputTags = document.getElementsByTagName("input");
        console.log(inputTags.length);
        for(i=0;i < inputTags.length;i++){
            console.log(inputTags[i].value);
            if(inputTags[i].value === ""){
                alert("All fields are required");
                return false;
            }
        }
        return true;
}
</script>

但它对你的代码不起作用，因为你所有的标签都是无效的格式，所以我从@davmszd答案中提取了示例代码并应用于此，它起到了的作用

检查

function validate()
{		
		var inputTags = document.getElementsByTagName("input");
		console.log(inputTags.length);
		for(i=0;i < inputTags.length;i++){
			console.log(inputTags[i].value);
			if(inputTags[i].value === ""){
				//alert("All fields are required");
              document.getElementById("status").innerHTML = "All fields are required";
				return false;
			}
		}
		
		return true;
}
<body>
  <form name="myForm" onsubmit="return(validate());">
    <table cellspacing="2" cellpadding="2" border="1">
      <tr>
        <td align="right">Name</td>
        <td>
          <input type="text" name="Name" />
        </td>
      </tr>
      <tr>
        <td align="right">EMail</td>
        <td>
          <input type="text" name="EMail" />
        </td>
      </tr>
      <tr>
        <td align="right">Zip Code</td>
        <td>
          <input type="text" name="Zip" />
        </td>
      </tr>
      <tr>
        <td align="right">Country</td>
        <td>
          <select name="Country">
            <option value="-1" selected>[choose yours]</option>
            <option value="1">USA</option>
            <option value="2">UK</option>
            <option value="3">INDIA</option>
          </select>
        </td>
      </tr>
      <tr>        
        <td>
          <input type="submit" value="Submit" />
        </td>
        <td align="right" id="status"></td>
      </tr>
    </table>
  </form>
</body>

我使用的document.getElementsByTagName("input");还有一件事，它应该总是在创建输入标签后使用。如果你在输入标签之前使用它，我将无法使用

相关文章：