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

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

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

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

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

重点代码列举一下:
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>
《form表格提交满足条件再执行action小技巧.doc》
将本文的Word文档下载到电脑,方便收藏和打印
推荐度:
点击下载文档

文档为doc格式

很赞哦! ()

文章评论

本栏推荐

站点信息

  • 建站时间2019年06月15日
  • 网站程序:帝国CMS7.5
  • 博客模板:可免费共享
  • 文章统计:152篇文章
  • 时间卷轴时间轴
  • 标签管理标签云
  • 网站地图XML网站地图
  • 微信二维码:扫描一下,你我就是有缘