JavaScript表单验证未按预期工作

早上好

我正在做一些简单的表单验证。每当我提交表单时，都会出现错误消息，但我可以重复发送大量错误消息的按钮。有没有办法将此更改为只显示一次错误消息？我还注意到，即使我填充了这两个字段，它仍然会在控制台中快速闪烁，并显示错误日志，但不会显示错误

有人能告诉我我做错了什么吗

var uname=document.forms['signIn']['userame'].value；
var pword=document.forms['signIn']['password'].value；
功能验证e（e）{
if（uname.length | | pword.length<1 | |“”）{
var container=document.getElementById（'error-container'）；
var errorMsg=document.createElement（'div'）；
errorMsg.className='错误消息'；
errorMsg.innerHTML='请输入有效的用户名或密码'；
container.appendChild（errorMsg）；
console.log（“发生错误”）；
返回false；
} 
}

登录
用户名
密码
登录

这是完整的工作代码

var uname=”“；
var pword=“”；
功能验证e（e）{
e、 预防默认值（）；
uname=document.forms['signIn']['username'].value；
pword=文件.forms['signIn']['password'].value；
if（uname.length | | pword.length<1 | |“”）{
var container=document.getElementById（'error-container'）；
var errorMsg=document.createElement（'div'）；
errorMsg.className='错误消息'；
errorMsg.innerHTML='请输入有效的用户名或密码'；
container.appendChild（errorMsg）；
console.log（“发生错误”）；
返回false；
}
返回true；
}

登录
用户名
密码
登录

这是完整的工作代码

var uname=”“；
var pword=“”；
功能验证e（e）{
e、 预防默认值（）；
uname=document.forms['signIn']['username'].value；
pword=文件.forms['signIn']['password'].value；
if（uname.length | | pword.length<1 | |“”）{
var container=document.getElementById（'error-container'）；
var errorMsg=document.createElement（'div'）；
errorMsg.className='错误消息'；
errorMsg.innerHTML='请输入有效的用户名或密码'；
container.appendChild（errorMsg）；
console.log（“发生错误”）；
返回false；
}
返回true；
}

登录
用户名
密码
登录

您必须清除

容器中的内容，以避免元素重复。以下是需要注意的几件事：


您试图在小提琴中获得用户名，而不是用户名。可能是拼写错误
保留
input type=submit
而不是
按钮
将
事件
传递给您的
validateMe函数
，以防止post的默认操作
在函数中移动变量以始终获得实际值


功能验证ME（e）{
e、 预防默认值（）；
var uname=document.forms['signIn']['username'].value；
var pword=document.forms['signIn']['password'].value；
var container=document.getElementById（'error-container'）；
container.innerHTML=''；//清除内容，而不是重复内容
如果（未指定长度<1 | | pword.length<1）{
var errorMsg=document.createElement（'div'）；
errorMsg.className='错误消息'；
errorMsg.innerHTML='请输入有效的用户名或密码'；
container.appendChild（errorMsg）；
console.log（“发生错误”）；
返回false；
}
}

登录
用户名
密码
您必须清除
容器中的内容，以避免元素重复。以下是需要注意的几件事：


您试图在小提琴中获得用户名，而不是用户名。可能是拼写错误
保留
input type=submit
而不是
按钮
将
事件
传递给您的
validateMe函数
，以防止post的默认操作
在函数中移动变量以始终获得实际值


功能验证ME（e）{
e、 预防默认值（）；
var uname=document.forms['signIn']['username'].value；
var pword=document.forms['signIn']['password'].value；
var container=document.getElementById（'error-container'）；
container.innerHTML=''；//清除内容，而不是重复内容
如果（未指定长度<1 | | pword.length<1）{
var errorMsg=document.createElement（'div'）；
errorMsg.className='错误消息'；
errorMsg.innerHTML='请输入有效的用户名或密码'；
container.appendChild（errorMsg）；
console.log（“发生错误”）；
返回false；
}
}

登录
用户名
密码
您是否有JSFIDLE/CodePen？您是否尝试过在函数顶部使用“防止默认值”？无论如何，如果情况看起来不好。你能提供你的html或fiddle吗？是的，请给我一点时间。你有没有尝试通过document.getElementById读取uname和pword的值？我添加了一个fiddle，尽管它似乎根本不起作用-有什么想法吗？你有JSFIDLE/CodePen吗？你有没有尝试在函数顶部使用prevent default？无论如何，如果情况看起来不好。你能提供你的html或fiddle吗？是的，请给我一点时间。你是否尝试通过document.getElementById读取uname和pword的值？我添加了一个fiddle，尽管它似乎根本不起作用-有什么想法吗？非常感谢，尽管问题是