使用JavaScript验证表单

我试图用纯JavaScript创建一个表单验证。 我有两个元素要验证，一个选择选项和一个复选框，但我无法使选择选项工作

这是我第一次尝试，请耐心等待：

var登记表，elSelectGender，elGenderHint，elTerms，elTermsHint；//声明变量
registrationForm=document.getElementById（'registrationForm'）；//存储元素
elSelectGender=document.getElementById（'gender'）；
elGenderHint=document.getElementById（'genderHint'）；
elTerms=document.getElementById（'terms'）；
elTermsHint=document.getElementById（'termsHint'）；
elName=document.getElementById（'firstName'）；
elNameHint=document.getElementById（'nameHint'）；
函数检查名（事件）{
if（elselectSeven.valueOf（）==null）{//if未输入名称
elNameHint.innerHTML='必须插入您的姓名。；//显示消息
event.preventDefault（）；//不提交表单
}
}
功能检查性别（事件）{
如果（elSelectGender.valueOf（）=='选择一个选项：'）{//如果未选择性别
elGenderHint.innerHTML='必须选择性别。；//显示消息
event.preventDefault（）；//不提交表单
}
}
功能检查术语（事件）{
如果（！elTerms.checked）{//如果勾选了复选框
elTermsHint.innerHTML=“您必须同意条款。”；//显示消息
event.preventDefault（）；//不提交表单
}
}
//创建事件侦听器：提交调用checkTerms（），更改调用packageHint（）
registrationForm.addEventListener（'submit'，checkName，false）；
注册表格.addEventListener（'submit'，Check Seven，false）；
注册表格。addEventListener（'submit'，checkTerms，false）

姓名：
性别：
选择一个选项：
男性
女性
我不想说
检查是否同意条款&；条件
我将
valueOf（）
更改为
value
等于空（初始化表单时，字段为空，它不是
null
）

确保您的HTML元素是正确的，我以前看到它是错误的，现在它似乎已经被纠正了

我添加了一个
else
语句来处理用户更正验证错误时的错误

不过，这是一个很简单的验证，它需要做更多的工作（比如最小长度，最大长度，你可能也想考虑它们，以及一些评论员提到的清理，修剪，我将留给你）。

var登记表，elSelectGender，elGenderHint，elTerms，elTermsHint；//声明变量
registrationForm=document.getElementById（'registrationForm'）；//存储元素
elSelectGender=document.getElementById（'gender'）；
elGenderHint=document.getElementById（'genderHint'）；
elTerms=document.getElementById（'terms'）；
elTermsHint=document.getElementById（'termsHint'）；
elName=document.getElementById（'firstName'）；
elNameHint=document.getElementById（'nameHint'）；
函数检查名（事件）{
如果（elName.value=''）{//if未输入名称
elNameHint.innerHTML='必须插入您的姓名。；//显示消息
event.preventDefault（）；//不提交表单
}否则{
elNameHint.innerHTML=''；
}
}
功能检查性别（事件）{
如果（elSelectGender.value=='选择一个选项：'）{//如果未选择性别
elGenderHint.innerHTML='必须选择性别。；//显示消息
event.preventDefault（）；//不提交表单
}否则{
elGenderHint.innerHTML=''；
}
}
功能检查术语（事件）{
如果（！elTerms.checked）{//如果勾选了复选框
elTermsHint.innerHTML=“您必须同意条款。”；//显示消息
event.preventDefault（）；//不提交表单
}否则{
elTermsHint.innerHTML=''；
}
}
//创建事件侦听器：提交调用checkTerms（），更改调用packageHint（）
registrationForm.addEventListener（'submit'，checkName，false）；
注册表格.addEventListener（'submit'，Check Seven，false）；
注册表格。addEventListener（'submit'，checkTerms，false）

姓名：
性别：
选择一个选项：
男性
女性
我不想说
检查是否同意条款&；条件
我将选择和输入包装到
标签
中，并使用CSS显示
。警告
错误消息。

然后我会使用
Array.prototype.some（）
检查我的任何元素，但没有通过检查，然后使用
ev.preventDefault（）
并显示警告：


const EL=sel=>document.querySelector（sel），
警告=（el，err）=>[err，el.closest（'label'）.classList.toggle（'is-error'，err'）[0]，
noValue=el=>警告（el，！el.value.trim（）），
noCheck=el=>警告（el，！el.已检查），
checkFormRegistration=ev=>{
常量isSomeInvalid=[
noValue（EL（“#firstName”），
noValue（EL（“#性别”），
noCheck（EL（“#术语”））
].部分（b=>b）；
if（isSomeInvalid）ev.preventDefault（）；
};
EL（“#注册表格”）。添加了EventListener（“提交”，checkFormRegistration）
label.is-error>*{
轮廓：1px纯红；
轮廓偏移：-1px；
}
标签+.警告{
显示：无；
颜色：红色；
}
label.is-error+警告{
显示：块；
}

姓名：
请输入一个名称
性别：
选择一个选项：
男性
女性
我不想说
请选择性别
检查是否同意条款&；条件
你必须同意这些条款
进行一些基本调试
console.log（elSelectGender.valueOf（））
。要检查名称字段的有效性，请使用
if（elName.value==“”）{}
；输入字段值从不为
null
。若要检查性别的有效性，请使用
if（elSelectGender.value==”选择一个选项