Javascript 实时表单验证-如何检查所有字段是否有效？_Javascript_Forms_Dom

Javascript 实时表单验证-如何检查所有字段是否有效？

javascript forms dom

Javascript 实时表单验证-如何检查所有字段是否有效？,javascript,forms,dom,Javascript,Forms,Dom,我最近刚开始学习Javascript，作为我的第一个项目之一，我正在创建一个表单，该表单可以根据用户类型进行实时验证。对于每个文本字段，都有一个类似“userError（）”的函数来检查错误。每次更改文本字段时都会运行此函数除了一个问题外，它工作正常。我有两个包含按钮的div。一个是禁用的提交按钮（当表单中仍然存在错误时），另一个是真正的提交按钮（当所有字段都有效时）。函数“disableSubmit（）”是在加载时运行的，因此在表单完成之前，真正的提交按钮是隐藏的。每次成功验证一个字段时，都

我最近刚开始学习Javascript，作为我的第一个项目之一，我正在创建一个表单，该表单可以根据用户类型进行实时验证。对于每个文本字段，都有一个类似“userError（）”的函数来检查错误。每次更改文本字段时都会运行此函数

除了一个问题外，它工作正常。我有两个包含按钮的div。一个是禁用的提交按钮（当表单中仍然存在错误时），另一个是真正的提交按钮（当所有字段都有效时）。函数“disableSubmit（）”是在加载时运行的，因此在表单完成之前，真正的提交按钮是隐藏的。每次成功验证一个字段时，都会运行函数switchButton（）。switchButton检查所有函数（userError、passError等）是否返回true。如果他们这样做，则会显示真正的提交按钮，并隐藏禁用的按钮。我想这会管用的，但由于某种原因它不管用。即使表单没有错误，它也会一直显示禁用的按钮

Javascript：

<script>
button=document.getElementById('submit')
password=document.getElementById('password')
function switchButton() {
    if (userError() && passError() && confirmError() && emailError()) {
        document.getElementById('submitbutton').style.display = 'inline';
        document.getElementById('disabled').style.display = 'none'; 
    }
    else {
        document.getElementById('submitbutton').style.display = 'none';
        document.getElementById('disabled').style.display = 'inline';
    }
}
function disableSubmit() {
    document.getElementById('submitbutton').style.display = 'none';
    document.getElementById('disabled').style.display = 'inline';   
}
function userError() {

    username=document.getElementById('username')
    usererror=document.getElementById('usererror')


    if (username.value.length < 4) {
        usererror.innerHTML='<font size="2" color="red"><img src="cross.png" style="max-width: 10px"/>&nbsp;&nbsp;Username too short.</font>';
        return false;
    } else if (username.value.length > 12) {
        usererror.innerHTML='<font size="2" color="red"><img src="cross.png" style="max-width: 10px"/>&nbsp;&nbsp;Username too long.</font>';
        return false;
    } else {
        usererror.innerHTML='<font size="2" color="darkgreen"><img src="check.jpg" style="max-width: 10px"/>&nbsp;&nbsp;Username looks great!</font>';
        return true;
        switchButton();
    }
}

function passError() {

    password=document.getElementById('password')
    passerror=document.getElementById('passerror')


    if (password.value.length < 7) {
        passerror.innerHTML='<font size="2" color="red"><img src="cross.png" style="max-width: 10px"/>&nbsp;&nbsp;Password too short.</font>';
        return false;
    } else if (password.value.length > 32) {
        passerror.innerHTML='<font size="2" color="red"><img src="cross.png" style="max-width: 10px"/>&nbsp;&nbsp;Password too long.</font>';
        return false;
    } else if (password.value.length = 0) {
        passerror.innerHTML='<font size="2" color="red"><img src="cross.png" style="max-width: 10px"/>&nbsp;&nbsp;Password not entered.</font>';
        return false;
    } else {
        passerror.innerHTML='<font size="2" color="darkgreen"><img src="check.jpg" style="max-width: 10px"/>&nbsp;&nbsp;Password looks great!</font>';
        return true;
        switchButton();
    }
}


function confirmError() {

    confirm=document.getElementById('confirm')
    confirmerror=document.getElementById('confirmerror')


    if (confirm.value != password.value) {
        confirmerror.innerHTML='<font size="2" color="red"><img src="cross.png" style="max-width: 10px"/>&nbsp;&nbsp;Passwords do not match.</font>';
        return false;
    } else {
        confirmerror.innerHTML='<font size="2" color="darkgreen"><img src="check.jpg" style="max-width: 10px"/>&nbsp;&nbsp;The passwords match!</font>';
        return true;
        switchButton();
    }
}


function emailError() {

    email=document.getElementById('email')
    emailerror=document.getElementById('emailerror')
    var atpos=email.value.indexOf("@");
    var dotpos=email.value.lastIndexOf(".");

    if (email.value.length > 40) {
        emailerror.innerHTML='<font size="2" color="red"><img src="cross.png" style="max-width: 10px"/>&nbsp;&nbsp;Email too long.</font>';
        return false;
   } else if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.value.length) {
        emailerror.innerHTML='<font size="2" color="red"><img src="cross.png" style="max-width: 10px"/>&nbsp;&nbsp;Email not valid.</font>';
        return false;
   } else if (email.value.length < 1) {
        emailerror.innerHTML='<font size="2" color="red"><img src="cross.png" style="max-width: 10px"/>&nbsp;&nbsp;Email not entered.</font>';
        return false;
   } else {
        emailerror.innerHTML='<font size="2" color="darkgreen"><img src="check.jpg" style="max-width: 10px"/>&nbsp;&nbsp;Email looks great!</font>';
        return true;
        switchButton();
    }
    }

    </script>


button=document.getElementById（'submit'）
password=document.getElementById（'password'）
功能开关按钮（）{
if（userError（）&&passError（）&&confirmeror（）&&emailError（））{
document.getElementById（'submitbutton'）.style.display='inline'；
document.getElementById（'disabled'）.style.display='none'；
}
否则{
document.getElementById（'submitbutton'）.style.display='none'；
document.getElementById（'disabled'）.style.display='inline'；
}
}
函数disableSubmit（）{
document.getElementById（'submitbutton'）.style.display='none'；
document.getElementById（'disabled'）.style.display='inline'；
}
函数userError（）{
username=document.getElementById（'username'）
usererror=document.getElementById（'usererror'））
如果（username.value.length<4）{
usererror.innerHTML='用户名太短'；
返回false；
}否则如果（username.value.length>12）{
usererror.innerHTML='用户名太长'；
返回false；
}否则{
usererror.innerHTML='Username看起来很棒！'；
返回true；
开关按钮（）；
}
}
函数passeror（）{
password=document.getElementById（'password'）
passerror=document.getElementById（'passerror'）
if（password.value.length<7）{
passerror.innerHTML='密码太短'；
返回false；
}else if（password.value.length>32）{
passerror.innerHTML='密码太长'；
返回false；
}else if（password.value.length=0）{
passeror.innerHTML='未输入密码'；
返回false；
}否则{
passeror.innerHTML='密码看起来很棒！'；
返回true；
开关按钮（）；
}
}
函数确认器（）{
确认=document.getElementById（'confirm'）
confirmerror=document.getElementById（'confirmerror'）
if（confirm.value！=password.value）{
confirmerror.innerHTML='密码不匹配'；
返回false；
}否则{
confirmerror.innerHTML='密码匹配！'；
返回true；
开关按钮（）；
}
}
函数emailError（）{
email=document.getElementById（'email'）
emailerror=document.getElementById（'emailerror'）
var atpos=email.value.indexOf（“@”）；
var dotpos=email.value.lastIndexOf（“.”）；
如果（email.value.length>40）{
emailerror.innerHTML='电子邮件太长'；
返回false；
}否则，如果（atpos您的返回true；
在开关按钮（）
之前，那么该函数将永远不会被调用…但如果被调用，我认为您将遇到重大问题，可能会导致浏览器无响应。您的开关按钮函数如下：
function switchButton() {
    if (userError() && passError() && confirmError() && emailError()) {
        document.getElementById('submitbutton').style.display = 'inline';
        document.getElementById('disabled').style.display = 'none'; 
    }
    else {
        document.getElementById('submitbutton').style.display = 'none';
        document.getElementById('disabled').style.display = 'inline';
    }
}

据我所知，在需要检查每个字段的四个函数中的每一个函数中调用该函数，但是在if中，您将调用相同的检查函数，从而导致调用开关按钮（）
的无休止循环
您需要从每个fieldError（）
函数中删除switchButton（）
调用
如果此时仍不起作用，请确保您的id是正确的。
一般来说，如果您告诉我们您看到了什么，这会很有帮助。请描述它是如何失败的，这可以帮助任何人查看您的代码，以了解哪些方面可能值得关注。您的返回true；
在开关按钮（）之前，这样该函数就永远不会被调用…哎呀，真不敢相信我忘记了！对不起。（厄尼）谢谢！我没有在fieldError（）函数中添加switchButton（），而是将表单onkeyup事件中的fieldError（）替换为switchButton。效果非常好！
function switchButton() {
    if (userError() && passError() && confirmError() && emailError()) {
        document.getElementById('submitbutton').style.display = 'inline';
        document.getElementById('disabled').style.display = 'none'; 
    }
    else {
        document.getElementById('submitbutton').style.display = 'none';
        document.getElementById('disabled').style.display = 'inline';
    }
}