您现在的位置是:首页 > 学无止境> CSS3|HTML5网站首页学无止境CSS3|HTML5

表单提交tips提示

tips   表单  
简介表单提交tips提示

HTML:

<div class="bd">
<script type="text/javascript" src="js/check.js"></script>
        <form enctype="multipart/form-data" method="post" name="myform" id="myform">
            <script language="javascript">             
var thisurl= window.location.href;
document.writeln("<input type=\"hidden\" name=\"ly\" value="+thisurl+">");    
document.writeln("<input type=\"hidden\" name=\"url\" value="+thisurl+">");                
</script>
        <p id="line_xm"><input type="text" name="xm" placeholder="姓名"><span class="tips">姓名不能为空</span></p>
        <p id="line_dh"><input type="text" name="dh" placeholder="电话号码"><span class="tips">电话号码不能为空</span><span class="tips2">请填写正确的手机号码</span></p>
        <input type="button" id="submit" value="点击提交" onclick="CheckForm();">
        </form>
</div>

CSS:

.bd{ width:90%; margin:0 auto;}
.bd input[type="text"]{width:100%; height:66px; line-height:66px; font-size:26px; padding:0 10px; background:#f2f2f2;-moz-box-shadow:0 0 3px #efefef;box-shadow:0 0 3px #efefef; box-sizing:border-box; -moz-box-sizing:border-box; margin-bottom:40px; border-radius:1px}

input::-webkit-input-placeholder { /* WebKit browsers */
  color:#b8b8b8;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color:#b8b8b8;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
  color:#b8b8b8;
}
input:-ms-input-placeholder { /* Internet Explorer 10+ */
  color:#b8b8b8;
}

.bd input[type="button"]{width:100%; height:66px; color:#fff; font-size:26px; background:#43bb51; border-radius:5px}
.bd p{position:relative}
.bd p span{display:none; position:absolute; top:25px; right:30px; background:#fff; border:1px solid #f2f2f2; font-size:14px; border-radius:0.1rem; padding:10ox 20px;-moz-box-shadow:0 0 5px #efefef;box-shadow:0 0 5px #efefef; z-index: 9;}
.bd p span:before{content:'';width:10px;height:10px; background:#fff;border:1px solid #f2f2f2; position:absolute;top:-6px; left:40%; transform: rotate(45deg); border-right:0;border-bottom:0}
.bd p#line_dh span{ top:-35px; right:30px;}
.bd p#line_dh span:before{display:none;}
.bd p#line_dh span:after{content:'';width:10px;height:10px; background:#fff;border:1px solid #f2f2f2; position:absolute;bottom:-6px; left:40%; transform: rotate(45deg); border-left:0;border-top:0}

js:

function CheckForm(){
if($("input[name='xm']").val()=="")
{
    $("#line_dh span.tips").css("display","none");
    $("#line_dh span.tips2").css("display","none");
    $("#line_xm span").css("display","block");
    return false;
}
if($("input[name='dh']").val()=="" || $("input[name='dh']").val()=="请输入电话号码")
{
    $("#line_xm span").css("display","none");
    $("#line_dh span.tips2").css("display","none");
    $("#line_dh span.tips").css("display","block");
    return false;
}
var partten3 =/(13|14|15|16|17|18|19)[0-9]{9}$/;
if(!partten3.test($("input[name='dh']").val()))
{
    $("#line_xm span").css("display","none");
    $("#line_dh span.tips").css("display","none");
    $("#line_dh span.tips2").css("display","block");
    return false;
}
$.ajax({
        type: 'post',
        url: "http://www.studyfx.cn/bd.php", 
        data:$("#myform").serialize(),
        beforeSend: function () {  
            $("#submit").attr({ disabled: "disabled" });  
        }, 
        success: function (data) {
          if(data==1){
            alert("提交成功,请保持电话畅通");
              document.myform.reset();
              $("#line_xm span").css("display","none");
            $("#line_dh span.tips").css("display","none");
            $("#line_dh span.tips2").css("display","none");
          
          }else{
            alert("提交失败,请重新提交");
          }
        },
        complete: function () {  
            $("#submit").removeAttr("disabled");
        }
        });
}


Top