验证表单中的多个字段答案

【问题标题】：Validating multiple fields in a form验证表单中的多个字段
【发布时间】：2012-06-01 20:24:40
【问题描述】：

我是第一次做测试。我阅读了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>

【问题讨论】：

标签： javascript forms html validation

【解决方案1】：

固定代码：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>

小心放置牙套的位置。此外，最好使用浏览器上的控制台来识别一些错误并修复它们。

【讨论】：

【解决方案2】：

你的大括号应该在函数 validateForm() 之后和 if 之后，并且在函数的末尾。总的来说，这个例子中的大括号是拧紧的。

把你的代码放好，让左大括号和右大括号匹配并且对你有意义。

【讨论】：

【解决方案3】：

您错过了一些大括号{}，其中一个放错了位置。

希望这可行：

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

【讨论】：

【解决方案4】：

您将大括号 { } 放错位置以验证密码。将它们放在if 子句之后。

【讨论】：

【解决方案5】：

我在网上找了很久才找到的..但是效果很好..

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

【讨论】：

嗨 Giorgos，你的链接坏了，你能把这个上传到 jsfiddle 中吗？