Javascript拒绝提交不工作

我有这个代码应该拒绝表单提交如果输入验证函数返回false。我不知道我对这个Javascript拒绝提交不工作

<script> 
function validateName(x){ 
     // Validation rule 
     var re = /^[A-Za-z0-9']{3,}$/; 
     // Check input 
     if(re.test(document.getElementById(x).value)){ 
     // Style green 
     document.getElementById(x).style.background ='#ccffcc'; 
     // Hide error prompt 
     document.getElementById(x + 'Error').style.display = "none"; 
     return true; 
     }else{ 
     // Style red 
     document.getElementById(x).style.background ='#e35152'; 
     // Show error prompt 
     document.getElementById(x + 'Error').style.display = "block"; 
     return false; 
     } 
    } 
function validateForm(){ 
     var error = 0; 
     if(!validateName('name')){ 
     error++; 
     } 
    if(error > 0) { 
     return false; 
    } 
    } 
</script>

做错了而我的HTML是这样的

<form action="register.php" method="post" onsubmit="return validateForm()"> 
Username 
<input type="text" name="username" id="username" onblur="validateName(name)" maxlength="12"/> 
<p class="inputdesc" align="center">(Between 8-12 characters.)</p> 
<input type="submit" name="submit" id="submit" value="Register"/> 
<input type="reset" value="Clear Form"/> 
</form>

的代码仍然可以提交，即使输入文字无效。

来源

2014-09-11 CudoX

您的调试控制台告诉您什么？ – Martijn 2014-09-11 13:06:37

即时通讯不使用任何IDE ..有什么我可以迅速在线测试这个调试控制台消息给你吗？ – CudoX 2014-09-11 13:07:56

不，它是您浏览器中的控制台。按F12并刷新（在大多数浏览器上，在Windows上） – Martijn 2014-09-11 13:09:16

我会做的是采取通过在物体上的功能，而不是优势。例如：

<form action="register.php" method="post" id="form"> 
Username 
<input type="text" name="username" id="username" onblur="validateName(this)" maxlength="12"/> 
<p class="inputdesc" align="center">(Between 8-12 characters.)</p> 
<input type="submit" name="submit" id="submit" value="Register"/> 
<input type="reset" value="Clear Form"/> 
</form> 

<script> 
var okay = false; 
function validateName(e){ 
    // Validation rule 
    var re = /^[A-Za-z0-9']{3,}$/; 

    // Check input 
    if(re.test(e.value)){ 
    // Style green 
    e.style.background ='#ccffcc'; 
    // Hide error prompt 
    // e.style.display = "none"; 
    okay = true; 
    }else{ 
    // Style red 
    e.style.background ='#e35152'; 
    // Show error prompt 
    e.style.display = "block"; 
    okay = false; 
    } 
} 

document.getElementById('form').addEventListener('submit', function(e){ 
    if(okay == false) { 
     e.preventDefault(); 
    } else { 
     e.submit(); 
    } 
}); 

</script>

来源

2014-09-11 13:15:49 Ghost

这是一个不缺少括号？ 'document.getElementById（'form'）。addEventListener（'submit'，function（e）{' – CudoX 2014-09-11 13:24:16

没有@ Gelo103097它下面有，在结束之前''，我刚刚使用了一个匿名函数而不是 – Ghost 2014-09-11 13:25:42

它还没有工作，即时通讯不知道为什么..即时通讯在我的控制台上有这个错误'TypeError：document.getElementById（...）is null' – CudoX 2014-09-11 13:27:26

你要找的名称，而不是用户名

if(/^[A-Za-z0-9']{3,}$/.test(document.getElementById(x).value) { 
    return true; 
}else{ 
    return false; 
} 


function validateForm(){ 
    var error = 0; 
    if(validateName('username') == false){ 
    error++; 
    } 
    if(error > 0) { 
    return false; 
    } 
}

形式

<form action="register.php" method="post" onsubmit="return validateForm();"> 
    Username 
    <input type="text" name="username" id="username" onblur="validateName(name)" maxlength="12"/> 
    <p class="inputdesc" align="center">(Between 8-12 characters.)</p> 
    <input type="submit" name="submit" id="submit" value="Register"/> 
    <input type="reset" value="Clear Form"/> 
</form>

来源

2014-09-11 12:58:34

Javascript拒绝提交不工作

回答

相关问题