验证表单中的多个字段

时间:2012-06-01 20:24:41

标签: javascript forms html5 validation

我是第一次进行测试。我阅读了this代码并从中创建了一个代码。问题是即使字段留空也不会出现任何错误。

这是我的fiddle

请帮忙。感谢。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
{function validateForm()

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

var y=document.forms["myForm"]["password"].value;
  {
if (y==null || y=="")
  alert("Password name must be filled out");
  return false;
  }
</script>
</head>

<body>

<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
Name*: <input type="text" name="name"> <br>
Password*: <input type="password" name="password"><br>
Email: <input type="text" name="email"><br>
<input type="submit" value="Submit">
</form>
</body>

</html>

5 个答案:

答案 0 :(得分:6)

固定代码:jsfiddle

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function validateForm() {

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

var y=document.forms["myForm"]["password"].value;
if (y==null || y=="") {
  alert("Password name must be filled out");
  return false;
}
}
</script>
</head>

<body>

<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
Name*: <input type="text" name="name"> <br>
Password*: <input type="password" name="password"><br>
Email: <input type="text" name="email"><br>
<input type="submit" value="Submit">
</form>
</body>
<html>

小心放置牙箍的位置。此外,在浏览器上使用控制台识别某些错误并修复它们是有利的。

答案 1 :(得分:4)

你的大括号应该在函数validateForm()之后和if之后,以及在函数结束之后。总的来说,在这个例子中拧紧了牙箍。

将你的代码放在一边,以便开启和关闭大括号匹配并对你有意义。

答案 2 :(得分:4)

你错过了一些大括号{},其中一个在错误的位置。

希望这有效:

function validateForm() {
var x=document.forms["myForm"]["name"].value;

if (x==null || x=="")
  {
  alert("Name must be filled out");
  return false;
  }

var y=document.forms["myForm"]["password"].value;
  {
if (y==null || y=="")
  alert("Password name must be filled out");
  return false;
 }
}

答案 3 :(得分:1)

您错误地使用大括号{ }来验证密码。将它们放在if子句之后。

答案 4 :(得分:0)

经过很长一段时间的搜索,我在互联网上找到了它。但它的工作原理很完美......

HTML代码

<html>
<head>
<title>Form Validation</title>
<script type="text/javascript">
<!--
// Form validation code will come here.
//-->
</script>
</head>
<body>
 <form action="/cgi-bin/test.cgi" 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>

javascript

<script type="text/javascript">
<!--
// Form validation code will come here.
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>

以及电子邮件验证功能

<script type="text/javascript">
<!--
function validateEmail()
{

   var emailID = document.myForm.EMail.value;
   atpos = emailID.indexOf("@");
   dotpos = emailID.lastIndexOf(".");
   if (atpos < 1 || ( dotpos - atpos < 2 )) 
   {
       alert("Please enter correct email ID")
       document.myForm.EMail.focus() ;
       return false;
   }
   return( true );
}
//-->
</script>

您可以在线查看here