阻止表单提交和提交
之前知道submit可以直接表单提交，然后第一次要阻止表单提交，于是百度知道提交会触发onsubmit事件，于是有了下面的代码
<form id="register" name="register" method="get" action="https://www.baidu.com" onsubmit="return checkForm();"> <input type="text" name="userName" placeholder="用户名" autocomplete="off"/> <input type="submit" name="submit1" value="注册"/> </form>
<script type="text/javascript">
$(function(){
function checkForm(){
if($("input[name="userName"]").val()){
return true;
}else{
return false;
}
}
})然后发现这个函数死活不能阻止执行…… 然后又花了一大番精力，简直是，终于发现原因，这里的checkForm()函数不能放在$(function(){})里面，挪出去后，终于可以执行了，但是可能当时浏览器抽风了，不管怎么都进不了else里面，表单不管怎么都提交了……，最后过了一天又测试，其实是可以的。
当时看这个实在不行，然后就想直接用button模拟提交，与是有了下面的代码
<form id="register" name="register" method="get" action="https://www.baidu.com" onsubmit="return checkForm();"> <input type="text" name="userName" placeholder="用户名" autocomplete="off"/> <input type="button" name="show" value="点击"/> </form>
<script type="text/javascript">
$(function(){
var name = "";
$("input[name="userName"]").blur(function(){
if($(this).val()){
name = $(this).val();
}
});
$("input[name="show"]").click(function(){
if(name){
//alert("ok");
$("form#register").submit();
}else{
alert("不能提交");
}
})
})可能是同一天浏览器真的抽风了，这样倒是不满足条件不能提交了，但是满足情况下执行函数submit()后，居然一直不跳转页面，真的是要吐血了……当时以为这种也不行，后面证实这个方法是可以的。
在以为上面的方法也不行的时候，于是又继续……这个方法浏览器当时挺正常的。
<form id="register" name="register" method="get" action="https://www.baidu.com" onsubmit="return checkForm();"> <input type="text" name="userName" placeholder="用户名" autocomplete="off"/> <input type="submit" name="submit1" value="注册"/> </form>
<script type="text/javascript">
$(function(){
var name = "";
$("input[name="userName"]").blur(function(){
if($(this).val()){
name = $(this).val();
}
});
$("input[name="submit1"]").click(function(){
if(name){
return true;
}else{
return false;
}
})
})不相信前面的代码真有问题，第二天重新测试，前面改进的方法有的是可以的，当时不仅是浏览器抽风了，也是我的知识不扎实，不然就不会有第一次check()函数放的位置的问题了，搞了大半天，最后来个汇总吧：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>登录处理页面</title>
<script src="js/jquery-3.0.0.js" type="text/javascript"></script>
</head>
<body>
<form id="register" name="register" method="get" action="https://www.baidu.com" onsubmit="return checkForm();">
<input type="text" name="userName" placeholder="用户名" autocomplete="off"/>
<input type="submit" name="submit1" value="注册"/>
<input type="button" name="show" value="点击"/>
</form>
<script type="text/javascript">
$(function(){
var name = "";
$("input[name="userName"]").blur(function(){
if($(this).val()){
name = $(this).val();
}
});
//方法一：
/*$("input[name="show"]").click(function(){
if(name){
//alert("ok");
$("form#register").submit();
}else{
alert("不能提交");
}
})*/
//方法二：
$("input[name="submit1"]").click(function(){
if(name){
return true;
}else{
return false;
}
})
})
//方法三：<span style="color:#FF0000;">注意写在$(function(){})外面也就是放dom ready那个匿名函数外面</span>，要不外部无法访问，onsubmit访问的函数需要在window作用域下
/*function checkForm(){
if($("input[name="userName"]").val()){
return true;
}else{
return false;
}
}*/
</script>
</body>
</html>
注意：
1. onsubmit="return checkForm();" //<span style="color:#FF0000;">不能省略return,函数名尽量不要取关键字</span> 2. checkForm（）函数的位置 3. 只选择一种方式提交，不要多次提交
声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
