Javascript未正确验证表单。显示警报，无需用户输入 问题

我尝试使用下面的javascript验证此表单，但即使我没有输入任何值，警报也只会显示一次，然后表单将提交并创建文件

---

Javascript

函数validateForm（）{
log（“代码正在运行”）；
var firstName=document.forms。[“myForm”][“firstName”].value；
var lastName=document.forms[“myForm”][“lastName”].value；
var-gender=document.forms[“myForm”][“gender”].value；
var eMail=document.forms[“myForm”][“eMail”].value；
var phoneNumber=document.forms[“myForm”][“phoneNumber”].value；
var信息=document.forms[“myForm”][“information”]。值；
如果（firstName==null | | firstName===“”）{
提示（“请输入您的名字。”）；
返回false；
}
如果（lastName==null | | lastName==“”）{
提醒（“请输入您的姓氏”）；
返回false；
}
如果（性别==null）{
提醒（“请点击您性别旁边的按钮”）；
返回false；
}
var atpos=eMail.indexOf（“@”）；
var dotpos=eMail.lastIndexOf（“.”）；
如果（atpos<1 | | dotpos=eMail.length）{
警报（“不是有效的电子邮件地址”）；
返回false；
}
}

PHP/HTML

名字：
姓氏：
性别：
男性
女性
电邮：
电话号码：
提出问题并提供背景信息

您有几个打字错误；您使用的是

lastName

，而不是

lastName

。另外，只需将submit按钮设置为一个按钮，并删除

onSubmit（）

事件处理程序，然后通过javascript的

form.submit（）调用它


家
函数validateForm（）
{
log（“代码正在运行”）；
var firstName=document.forms。[“myForm”][“lastName”].value；
var lastName=document.forms[“myForm”][“Gender”].value；
var-gender=document.forms[“myForm”][“gender”].value；
var eMail=document.forms[“myForm”][“eMail”].value；
var phoneNumber=document.forms[“myForm”][“phoneNumber”].value；
var信息=document.forms[“myForm”][“information”]。值；
如果（firstName==null | | firstName===“”）{
提示（“请输入您的名字。”）；
返回false；
}
如果（lastName==null | | lastName==“”）{
提醒（“请输入您的姓氏”）；
返回false；
}
如果（性别==null）{
提醒（“请点击您性别旁边的按钮”）；
返回false；
}
var atpos=eMail.indexOf（“@”）；
var dotpos=eMail.lastIndexOf（“.”）；
如果（atpos<1 | | dotpos=eMail.length）{
警报（“不是有效的电子邮件地址”）；
返回false；
}
}
名字：
姓氏：
性别：
男性
女性
电邮：
电话号码：
提出问题并提供背景信息
除了scrblnrd3的答案之外，要获得性别的价值，您还需要：

 <td>Gender:</td>
 <td><input type="radio" name="Gender" value="male">Male
     <input type="radio" name="Gender" value="female"> Female
 </td>


var genderButtons = form.Gender;
var genderValue;

for (var i=0, iLen=genderButtons.length; i<iLen; i++) {

  if (genderButtons[i].checked) {
    genderValue = genderButtons[i].value;
  }
}

if (!genderValue) {
  // no gender button selected
}

性别：
男性
女性
var genderButtons=form.Gender；
var性别价值；
对于（var i=0，iLen=genderButtons.length；i，因为您可以自己调试它并让它再次运行。您还需要一个函数来阻止表单提交，这就是
event.preventDefault（）

在html中，只需调用函数即可，无需添加javascript，也无需返回

<form ... onsubmit="validateForm()" ... >

在javascript中，将当前验证替换为

...
var isMale   = document.getElementById('isMale')
,   isFemale = document.getElementById('isFemale');
...
if (!isMale.checked && !isFemale.checked) {
  // user hasn't checked male nor female
  alert("Please Click on the button next to your gender");
  return false;
}
...

表单仍然没有验证。还应将此消息从侦听器传递并作为表单接收，以便缩短引用，例如
var firstName=form.firstName.value；
此外，表单控制值是字符串，因此
firstNmae===null
即使在删除打字错误时也将始终为false。它是否应该是form.firstName.value或myForm.firstNmae.value？但如果其始终为false，则永远不应提交表单，而应始终提交表单。它应为控件的任何名称。除了拼写之外，控件名和变量名存在错误对齐，并且性别值不能像那样访问。等等..现在显示错误，但在I cl之后单击“确定”，它不会等待我重新输入数据，只会提交不完整的表单这是非法的
document.forms。[“myForm”]
删除使用字符串获取方法时的句点您调用的是lastName、gender和gender而不是firstname、lastName、gender。而且您有几个拼写错误。总之，您没有对自己进行太多调试。我在.php页面中有一个包含firstname、lastName和gender的页面。这可能发生在
 <td>Gender:</td>
 <td><input type="radio" name="Gender" value="male">Male
     <input type="radio" name="Gender" value="female"> Female
 </td>


var genderButtons = form.Gender;
var genderValue;

for (var i=0, iLen=genderButtons.length; i<iLen; i++) {

  if (genderButtons[i].checked) {
    genderValue = genderButtons[i].value;
  }
}

if (!genderValue) {
  // no gender button selected
}

function validateForm (e) {
  // stops the form submitting
  (e || window.event).preventDefault();
  ...
  // all code in between

  ...
  document.forms["myForm"].submit();
}

<form ... onsubmit="validateForm()" ... >

// avoid a null value by having a default value using checked attribute
<input type="radio" id="isMale" checked ... > Male
<input type="radio" id="isFemale" ... > Female

...
var isMale   = document.getElementById('isMale')
,   isFemale = document.getElementById('isFemale');
...
if (!isMale.checked && !isFemale.checked) {
  // user hasn't checked male nor female
  alert("Please Click on the button next to your gender");
  return false;
}
...