验证使用JavaScript的注册

我是JavaScript新手，目前正在使用JavaScript验证注册表。我似乎不懂这个诀窍。 以下是表单的代码笔链接：

请指出我做错了什么

let button=document.querySelector（“提交”）；
let message=document.querySelector（“#id”）；
让表单=document.forms[“login”]
让field1=document.forms[“login”][“firstName”]；
让field2=document.forms[“login”][“lasttName”]；
让field3=document.forms[“login”][“emailAddress”]；
let field4=document.forms[“login”][“password”]；
按钮。addEventListener（“单击”，（）=>{
函数提交（）{
如果（field1.value==“”）{
message.textContext=“填写您的名字”；
返回false；
}
如果（field2.value==“”）{
message.textContext=“填写您的姓氏”；
返回false；
}
如果（field3.value==“”）{
message.textContext=“填写您的电子邮件地址”；
返回false；
}
如果（field4.value==“”）{
message.textContext=“输入所需密码”；
返回false；
}
}
})

body，
html{
保证金：0；
宽度：100%；
字体系列：“lato”，无衬线；
背景：#efef；
身高：100%；
}
.集装箱{
显示器：flex；
对齐项目：居中；
证明内容：中心；
弯曲方向：立柱；
垂直对齐：中间对齐；
线高：2；
宽度：100%；
身高：100%；
}
.登录{
宽度：100%；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
}
.输入{
宽度：70%；
}
.输入文本{
宽度：97%；
高度：2.5em；
填充：0 10px 0 10px；
边界半径：25px；
边框：1px纯黑；
背景：透明；
}
.提交{
边缘顶部：50px；
边缘底部：50px；
文本对齐：居中；
背景色：#2196F3；
垫面：5px；
垫底：5px；
边界半径：25px；
宽度：70%；
颜色：白色；
文字装饰：无；
}
a:悬停{
背景色：#56b4ff；
颜色：白色；
}
.内联{
显示器：flex；
宽度：70%；
证明内容：之间的空间；
}
#框2{
左边距：2米；
宽度：70%；
}

文件
在这里注册

名字

姓

电子邮件地址

密码

几个问题

• 使用表单的提交事件
• 没有内部命名函数
• 使用preventDefault将事件传递给函数
• 永远不要调用任何东西=“提交”
• 如果元素有ID，我更喜欢getElementById
• 表单名称已过时
• 不要将“id”用作

  id

  ——这会让人混淆

我稍微简化了代码

let message=document.getElementById（“message”）；
让form=document.getElementById（“登录”）；
让field1=form.firstName；
让field2=form.lasttName；
让field3=form.emailAddress；
让field4=form.password；
让消息=[]；
表格.附录列表（“提交”、（e）=>{
如果（field1.value==“”）{
消息。推送（“填写您的名字”）；
}
如果（field2.value==“”）{
消息。推送（“填写您的姓氏”）；
}
如果（field3.value==“”）{
推送（“填写您的电子邮件地址”）；
}
如果（field4.value==“”）{
messages.push（“输入所需密码”）；
}
如果（messages.length>0）{
e、 预防默认值（）；
message.innerText=messages.join（“\n”）；
}
})

body，
html{
保证金：0；
宽度：100%；
字体系列：“lato”，无衬线；
背景：#efef；
身高：100%；
}
.集装箱{
显示器：flex；
对齐项目：居中；
证明内容：中心；
弯曲方向：立柱；
垂直对齐：中间对齐；
线高：2；
宽度：100%；
身高：100%；
}
.登录{
宽度：100%；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
}
.输入{
宽度：70%；
}
.输入文本{
宽度：97%；
高度：2.5em；
填充：0 10px 0 10px；
边界半径：25px；
边框：1px纯黑；
背景：透明；
}
.提交{
边缘顶部：50px；
边缘底部：50px；
文本对齐：居中；
背景色：#2196F3；
垫面：5px；
垫底：5px；
边界半径：25px；
宽度：70%；
颜色：白色；
文字装饰：无；
}
a:悬停{
背景色：#56b4ff；
颜色：白色；
}
.内联{
显示器：flex；
宽度：70%；
证明内容：之间的空间；
}
#框2{
左边距：2米；
宽度：70%；
}

文件
在这里注册

名字

姓

电子邮件地址

密码

登记

几个问题

• 使用表单的提交事件
• 没有内部命名函数
• 使用preventDefault将事件传递给函数
• 永远不要调用任何东西=“提交”
• 如果元素有ID，我更喜欢getElementById
• 表单名称已过时
• 不要将“id”用作

  id

  ——这会让人混淆

我稍微简化了代码

let message=document.getElementById（“message”）；
让form=document.getElementById（“登录”）；
让field1=form.firstName；
让field2=form.lasttName；
让field3=form.emailAddress；
让field4=form.password；
让消息=[]；
表格.附录列表（“提交”、（e）=>{
如果（field1.value==“”）{
消息。推送（“填写您的名字”）；
}
如果（field2.value==“”）{
消息。推送（“填写您的姓氏”）；
}
如果（field3.value==“”）{
推送（“填写您的电子邮件地址”）；
}
如果（field4.value==“”）{
messages.push（“输入所需密码”）；
}
如果（m
let button = document.querySelector("#submit");
let message = document.querySelector("#id") ;
let form = document.forms["login"]
let field1 = document.forms["login"]["firstName"];
let field2 = document.forms["login"]["lasttName"];
let field3 = document.forms["login"]["emailAddress"];
let field4 = document.forms["login"]["password"];



  button.addEventListener("click", () =>{

      if (field1.value == "") {
        message.innerHTML = "Fill in your first name";
        console.log(message.textContext,message)
        return false;
      }
      if (field2.value == "") {
        message.innerHTML = "Fill in your last name";
        return false;
      }
      if (field3.value == "") {
        message.innerHTML = "Fill in your email address";
        return false;
      }
      if (field4.value == "") {
        message.innerHTML = "Type in your desired password";
        return false;
      }

  })