Javascript 表单验证错误（初学者）

我从JavaScript开始。我刚刚编写了一个表单验证代码，但是checkfields（）函数不起作用。我试图找到错误，但几次尝试后都没发现。如果有人能指出错误，那将非常有帮助

报名
身体{
背景颜色：浅蓝色；
}
输入{
高度：30px；
宽：100px；
}
函数valform（）{
var x=文件.表格[“f2”][“fn”].值；
变量y=document.forms[“f2”][“ln”].值；
var z=document.forms[“f2”][“eid”].value；
var a=文件.forms[“f2”][“pass”].值；
var b=文件.表格[“f2”][“cpass”].值；
如果（x=“”| | y=“”| | z=“”| | a=“”| | b=“”）{
提醒（“请完整填写表格”）；
}
}
函数checkfields（）{
var p1=document.forms[“f2”][“pass”]值；
var p2=document.forms[“f2”][“cpass”]值；
如果（p1！=p2）{
document.getElementByID（“message”）.innerHTML=“密码不匹配”；
返回false；
}
}
报名
名字：姓氏：


电子邮件Id:



密码：



确认密码

两件事，您需要防止默认提交事件

注。。我还为您的表格提供了下一步所需的ID

我还删除了提交按钮的onclick

我修改了您的方法，根据验证结果返回布尔值

function valform() {
      var x = document.forms["f2"]["fn"].value;
      var y = document.forms["f2"]["ln"].value;
      var z = document.forms["f2"]["eid"].value;
      var a = document.forms["f2"]["pass"].value;
      var b = document.forms["f2"]["cpass"].value;
      if (x == "" || y == "" || z == "" || a == "" || b == "") {
        alert("Please fill the form completely");
        return false;
      }

            return true;
    }

我在

checkfields

方法中调用它，成功后，我使用上面指定的ID提交表单

function checkfields() {
  var p1 = document.forms["f2"]["pass"].value;
  var p2 = document.forms["f2"]["cpass"].value;
  if (p1 != p2) {
    document.getElementById("message").innerHTML = "Password Doesn't match";
    return false;
  }

  if(valform()){
    document.getElementById("myForm").submit();
  }
}

这里有一个小例子来演示上述内容

---

注意：您有一个错误

getElementByID

应该是小写的d（

getElementByID

）

有一个js错误，

getElementByID

应该是

getElementByID

我还修改了下面验证的方式

在submit上不需要单击处理程序，在submit上的

onsubmit上返回就足够了

Onsubmit调用
valform
，所有验证都在中完成。由于您已经有了一个
checkfields
函数，因此只需在验证函数中调用它即可

如果表单不完整，或者表单仍将提交，则还需要返回false。通过将
document.forms[“f2”]
缓存到变量中，您还可以使代码更简洁

你的css
widt:100px中也有一个输入错误


//将表单保存到变量中，以使下面的表单更简洁
var form_f2=document.forms[“f2”]；
函数checkfields（）{
变量p1=形式f2[“通过”]。值；
变量p2=形式f2[“cpass”]。值；
如果（p1！=p2）{
document.getElementById（“message”）.innerHTML=“密码不匹配”；
返回false；
}
}
函数valform（）{
var x=形式f2[“fn”]值；
var y=形式f2[“ln”]。值；
var z=形式f2[“eid”]。值；
var a=形式f2[“通过”]。值；
var b=形式f2[“cpass”]。值；
//打电话检查密码
checkfields（）；
如果（x=“”| | y=“”| | z=“”| | a=“”| | b=“”）{
提醒（“请完整填写表格”）；
//由于表格不完整，需要返回false
返回false；
}
}
正文{
背景颜色：浅蓝色；
}
输入{
高度：30px；
宽度：100px；
}

报名
名字：姓氏：


电子邮件Id:



密码：



确认密码




在
valform（）
函数中，您需要传入
事件
对象，以防止表单提交。验证不会随
事件一起通过。preventDefault（）
。另外，
document.getElementByID
应该是
document.getElementByID



报名
身体{
背景颜色：浅蓝色；
}
输入{
高度：30px；
宽：100px；
}
函数形式（e）{
var x=文件.表格[“f2”][“fn”].值；
变量y=document.forms[“f2”][“ln”].值；
var z=document.forms[“f2”][“eid”].value；
var a=文件.forms[“f2”][“pass”].值；
var b=文件.表格[“f2”][“cpass”].值；
如果（x=“”| | y=“”| | z=“”| | a=“”| | b=“”）{
提醒（“请完整填写表格”）；
e、 预防默认值（）；
}
}
函数checkfields（）{
var p1=document.forms[“f2”][“pass”]值；
var p2=document.forms[“f2”][“cpass”]值；
如果（p1！=p2）{
document.getElementById（“message”）.innerHTML=“密码不匹配”；
返回false；
}
返回true；
}
报名
名字：姓氏：


电子邮件Id:



密码：



确认密码




错误是：
getElementByID
它应该是
getElementByID