Heim >Backend-Entwicklung >PHP-Tutorial >阻止表单提交怎么用onsubmit呢？
阻止表单提交怎么用onsubmit呢？
- WBOYOriginal
- 2016-06-23 13:13:511326Durchsuche
我在表单里面直接写onsubmit="return false;" 这样可以阻止表单提交 但是我弄了一个check函数先试了一下 这样就阻止不了提交 这是为什么 我没做过内容不合法阻止表单提交的例子 我这个代码写了很多个函数 如果不合法阻止表单提交的话怎么阻止呢？一个个加上return false这句话吗？
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title> </title> <style type="text/css"> div input{display: inline-block;width: 200px;height: 20px;border:1px solid #ccc;} div .span1{display: inline-block;width: 90px;height: 20px;text-align: left;margin-top: 20px;} div #sp1,#sp2,#sp3,#sp4{display: inline-block;width: 160px;height: 20px;} </style> <script src="ajax.js"></script> <script type="text/javascript"> window.onload=function(){ var oInput=document.getElementsByTagName('input'); var oIpt1=document.getElementById('ipt1'); var oIpt2=document.getElementById('ipt2'); var oIpt3=document.getElementById('ipt3'); var oIpt4=document.getElementById('ipt4'); var oSp1=document.getElementById('sp1'); var oSp2=document.getElementById('sp2'); var oSp3=document.getElementById('sp3'); var oSp4=document.getElementById('sp4'); oIpt1.value = ''; oIpt2.value = ''; $("input[type=reset]").trigger("click"); var re=/^[\w]{6,12}$/; function check(){ return false; }; oIpt1.onblur=function(){ if(oIpt1.value==''){ this.style.border='1px solid red'; }else{ ajax("nameajax.php?id="+oIpt1.value,function(str){ oSp1.innerHTML=str; }) } }; oIpt2.onblur=function(){ if(oIpt2.value==''){ this.style.border='1px solid red'; }else{ if(oIpt2.value.match(re)){ oSp2.innerHTML='密码合法'; }else{ oSp2.innerHTML='密码不合法'; } } } oIpt3.onblur=function(){ if(oIpt3.value==''){ this.style.border='1px solid red'; }else{ if(oIpt2.value==oIpt3.value){ oSp3.innerHTML='密码正确'; }else{ oSp3.innerHTML='密码不一致'; } } }; oIpt4.onblur=function(){ if(oIpt4.value==''){ this.style.border='1px solid red'; }else{ ajax("emailajax.php?id="+oIpt4.value,function(str){ oSp4.innerHTML=str; }) } }; }; </script></head><body><div> <form action="reg.php" onsubmit="return check();" method="post"> <span class="span1">用 户 名:</span><input type="text" id="ipt1" name="username" autocomplete="off"><span id="sp1"></span><br /> <span class="span1">密 码:</span><input type="password" id="ipt2" autocomplete="off"><span id="sp2"></span><br /> <span class="span1">确认密码:</span><input type="password" id="ipt3" name="password" autocomplete="off"><span id="sp3"></span><br /> <span class="span1">邮 箱:</span><input type="text" id="ipt4" name="email" autocomplete="off"><span id="sp4"></span><br /> <button type="submit">提交</button> </form></div></body></html>
回复讨论(解决方案)
既然你是 onsubmit="return check();"
那么 check() 就应该有返回值呀！
你的 check 函数是怎么写的？不担心会有共享冲突吗？
把验证的代码 写到 check（） 函数里面就行了 通过就是 return true； 不通过就是 return false
既然你是 onsubmit="return check();"
那么 check() 就应该有返回值呀！
你的 check 函数是怎么写的？不担心会有共享冲突吗？
这样直接return一个false不行吗
既然你是 onsubmit="return check();"
那么 check() 就应该有返回值呀！
你的 check 函数是怎么写的？不担心会有共享冲突吗？
这样简单试了一下 第一个空着不写还是能提交过去啊
function check(){
if(oIpt1.value==''){
return false;
}
};
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title> </title> <style type="text/css"> div input{display: inline-block;width: 200px;height: 20px;border:1px solid #ccc;} div .span1{display: inline-block;width: 90px;height: 20px;text-align: left;margin-top: 20px;} div #sp1,#sp2,#sp3,#sp4{display: inline-block;width: 160px;height: 20px;} </style> <script src="ajax.js"></script> <script type="text/javascript"> window.onload=function(){ var oInput=document.getElementsByTagName('input'); var oIpt1=document.getElementById('ipt1'); var oIpt2=document.getElementById('ipt2'); var oIpt3=document.getElementById('ipt3'); var oIpt4=document.getElementById('ipt4'); var oSp1=document.getElementById('sp1'); var oSp2=document.getElementById('sp2'); var oSp3=document.getElementById('sp3'); var oSp4=document.getElementById('sp4'); oIpt1.value = ''; oIpt2.value = ''; $("input[type=reset]").trigger("click"); var re=/^[\w]{6,12}$/; function check(){ //if(条件){ // document.getElementById('form1').submit(); //} return false; }; oIpt1.onblur=function(){ if(oIpt1.value==''){ this.style.border='1px solid red'; }else{ ajax("nameajax.php?id="+oIpt1.value,function(str){ oSp1.innerHTML=str; }) } }; oIpt2.onblur=function(){ if(oIpt2.value==''){ this.style.border='1px solid red'; }else{ if(oIpt2.value.match(re)){ oSp2.innerHTML='密码合法'; }else{ oSp2.innerHTML='密码不合法'; } } } oIpt3.onblur=function(){ if(oIpt3.value==''){ this.style.border='1px solid red'; }else{ if(oIpt2.value==oIpt3.value){ oSp3.innerHTML='密码正确'; }else{ oSp3.innerHTML='密码不一致'; } } }; oIpt4.onblur=function(){ if(oIpt4.value==''){ this.style.border='1px solid red'; }else{ ajax("emailajax.php?id="+oIpt4.value,function(str){ oSp4.innerHTML=str; }) } }; }; </script></head><body><div> <form action="reg.php" id="form1" onsubmit="return false" method="post"> <span class="span1">用 户 名:</span><input type="text" id="ipt1" name="username" autocomplete="off"><span id="sp1"></span><br /> <span class="span1">密 码:</span><input type="password" id="ipt2" autocomplete="off"><span id="sp2"></span><br /> <span class="span1">确认密码:</span><input type="password" id="ipt3" name="password" autocomplete="off"><span id="sp3"></span><br /> <span class="span1">邮 箱:</span><input type="text" id="ipt4" name="email" autocomplete="off"><span id="sp4"></span><br /> <button type="button" onclick="check()">提交</button> </form></div></body></html>
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title> </title> <style type="text/css"> div input{display: inline-block;width: 200px;height: 20px;border:1px solid #ccc;} div .span1{display: inline-block;width: 90px;height: 20px;text-align: left;margin-top: 20px;} div #sp1,#sp2,#sp3,#sp4{display: inline-block;width: 160px;height: 20px;} </style> <script src="ajax.js"></script> <script type="text/javascript"> window.onload=function(){ var oInput=document.getElementsByTagName('input'); var oIpt1=document.getElementById('ipt1'); var oIpt2=document.getElementById('ipt2'); var oIpt3=document.getElementById('ipt3'); var oIpt4=document.getElementById('ipt4'); var oSp1=document.getElementById('sp1'); var oSp2=document.getElementById('sp2'); var oSp3=document.getElementById('sp3'); var oSp4=document.getElementById('sp4'); oIpt1.value = ''; oIpt2.value = ''; $("input[type=reset]").trigger("click"); var re=/^[\w]{6,12}$/; function check(){ //if(条件){ // document.getElementById('form1').submit(); //} return false; }; oIpt1.onblur=function(){ if(oIpt1.value==''){ this.style.border='1px solid red'; }else{ ajax("nameajax.php?id="+oIpt1.value,function(str){ oSp1.innerHTML=str; }) } }; oIpt2.onblur=function(){ if(oIpt2.value==''){ this.style.border='1px solid red'; }else{ if(oIpt2.value.match(re)){ oSp2.innerHTML='密码合法'; }else{ oSp2.innerHTML='密码不合法'; } } } oIpt3.onblur=function(){ if(oIpt3.value==''){ this.style.border='1px solid red'; }else{ if(oIpt2.value==oIpt3.value){ oSp3.innerHTML='密码正确'; }else{ oSp3.innerHTML='密码不一致'; } } }; oIpt4.onblur=function(){ if(oIpt4.value==''){ this.style.border='1px solid red'; }else{ ajax("emailajax.php?id="+oIpt4.value,function(str){ oSp4.innerHTML=str; }) } }; }; </script></head><body><div> <form action="reg.php" id="form1" onsubmit="return false" method="post"> <span class="span1">用 户 名:</span><input type="text" id="ipt1" name="username" autocomplete="off"><span id="sp1"></span><br /> <span class="span1">密 码:</span><input type="password" id="ipt2" autocomplete="off"><span id="sp2"></span><br /> <span class="span1">确认密码:</span><input type="password" id="ipt3" name="password" autocomplete="off"><span id="sp3"></span><br /> <span class="span1">邮 箱:</span><input type="text" id="ipt4" name="email" autocomplete="off"><span id="sp4"></span><br /> <button type="button" onclick="check()">提交</button> </form></div></body></html> 改了 不行 表单那里也改了
function check(){
if(oIpt1.value==''){
document.getElementById('form1').submit();
}
return false;
};
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title> </title> <style type="text/css"> div input{display: inline-block;width: 200px;height: 20px;border:1px solid #ccc;} div .span1{display: inline-block;width: 90px;height: 20px;text-align: left;margin-top: 20px;} div #sp1,#sp2,#sp3,#sp4{display: inline-block;width: 160px;height: 20px;} </style> <script src="ajax.js"></script> <script type="text/javascript"> window.onload=function(){ var oInput=document.getElementsByTagName('input'); var oIpt1=document.getElementById('ipt1'); var oIpt2=document.getElementById('ipt2'); var oIpt3=document.getElementById('ipt3'); var oIpt4=document.getElementById('ipt4'); var oSp1=document.getElementById('sp1'); var oSp2=document.getElementById('sp2'); var oSp3=document.getElementById('sp3'); var oSp4=document.getElementById('sp4'); oIpt1.value = ''; oIpt2.value = ''; $("input[type=reset]").trigger("click"); var re=/^[\w]{6,12}$/; function check(){ //if(条件){ // document.getElementById('form1').submit(); //} return false; }; oIpt1.onblur=function(){ if(oIpt1.value==''){ this.style.border='1px solid red'; }else{ ajax("nameajax.php?id="+oIpt1.value,function(str){ oSp1.innerHTML=str; }) } }; oIpt2.onblur=function(){ if(oIpt2.value==''){ this.style.border='1px solid red'; }else{ if(oIpt2.value.match(re)){ oSp2.innerHTML='密码合法'; }else{ oSp2.innerHTML='密码不合法'; } } } oIpt3.onblur=function(){ if(oIpt3.value==''){ this.style.border='1px solid red'; }else{ if(oIpt2.value==oIpt3.value){ oSp3.innerHTML='密码正确'; }else{ oSp3.innerHTML='密码不一致'; } } }; oIpt4.onblur=function(){ if(oIpt4.value==''){ this.style.border='1px solid red'; }else{ ajax("emailajax.php?id="+oIpt4.value,function(str){ oSp4.innerHTML=str; }) } }; }; </script></head><body><div> <form action="reg.php" id="form1" onsubmit="return false" method="post"> <span class="span1">用 户 名:</span><input type="text" id="ipt1" name="username" autocomplete="off"><span id="sp1"></span><br /> <span class="span1">密 码:</span><input type="password" id="ipt2" autocomplete="off"><span id="sp2"></span><br /> <span class="span1">确认密码:</span><input type="password" id="ipt3" name="password" autocomplete="off"><span id="sp3"></span><br /> <span class="span1">邮 箱:</span><input type="text" id="ipt4" name="email" autocomplete="off"><span id="sp4"></span><br /> <button type="button" onclick="check()">提交</button> </form></div></body></html> 提示这个错误
Uncaught ReferenceError: $ is not defined 27行
$是你jquery没引入吧
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：关于数组Nächster Artikel：SonarQube PHP 2.8 发布
In Verbindung stehende Artikel
Mehr sehen- So verwenden Sie cURL zum Implementieren von Get- und Post-Anfragen in PHP
- So verwenden Sie cURL zum Implementieren von Get- und Post-Anfragen in PHP
- So verwenden Sie cURL zum Implementieren von Get- und Post-Anfragen in PHP
- So verwenden Sie cURL zum Implementieren von Get- und Post-Anfragen in PHP
- Alle Ausdruckssymbole in regulären Ausdrücken (Zusammenfassung)