如何使用java Scripts验证表单

时间：2015-11-18 14:46:21

标签： javascript jsp

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

请帮帮我。

2 个答案:

答案 0 :(得分：0)

试试这个

对我而言，它在实时页面中工作

<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>

答案 1 :(得分：0)

首先，代码中存在不正确的封闭标记 您无需关闭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");的另一件事是它应该在创建输入标记后始终使用。如果你在输入标签之前使用它我将无法工作

相关问题
最新问题