您现在的位置是：孟垂博自媒体博客 ✈ JQuery

form表格提交满足条件再执行action小技巧

08-13最后更新时间：2019-08-15【已收录】人已围观收藏

简介1.满足条件直接执行。
2.不满足条件提醒用户输入对应的数据，阻止action执行。
3.弹出自定义样式的提醒。

效果图：

重点代码列举一下：

css代码：
<style>
.zhanghao{width:272px;height:30px;left:50%;top:10px;margin-left:-136px;background-color:#afa5a5;position:fixed;z-index:100;border-radius:12px;line-height:30px;font-size:14px;text-align:center;color:#4e4747;display:none}
.yincang{display:block}
</style>
html代码：
<div class="zhanghao" id="disappare" style="display:none;">请输入账号</div>
 <form class="regForm" method="post" action="AQKL.php">
 <input type="text" name="user_name" autocomplete="off" class="mui-input-clear muiInput" placeholder="会员账号" data-input-clear="1"><span class="mui-icon mui-icon-clear mui-hidden"></span>
<input type="button" id="btn" class="mui-btn accountLogin gonggButton" style="background: #6295F7;" value="立即登录">
js代码：
<script>
$(function(){
    $("#btn").click(function(){
		 var subname=$('input[name=user_name]').val();

        if(subname==""){
//低级版
           $( '.zhanghao').addClass( 'yincang' );
		   setTimeout(function(){document.getElementById("zhanghao").style.display="none";},2000);
//升级版
	  $("#disappare").show().delay(1000).hide(300);
		    return false;
		    
        }else{
            $(this).prop("type","submit");
        }
    });

});
</script>