http://gopro.ee.cagoe.com/index.html
html:
<div class="name"><input value="在此输入您的姓名" data-value="在此输入您的姓名" /></div> <div class="webId"><input value="在此输入您的微博ID" data-value="在此输入您的微博ID" /></div> <div class="address"><input value="在此输入您的地址" data-value="在此输入您的地址" /></div> <div class="tel"><input value="在此输入您的电话" data-value="在此输入您的电话" /></div> <div class="email"><input value="在此输入您的电子邮件" data-value="在此输入您的电子邮件" /></div>
<img src="images/load.png" class="msg_text02 CusAnimateDom " data-delay="400" lazypath="images/surplus/msg_text02.png" /> <img src="images/load.png" class="submit_btn CusAnimateDom " data-delay="400" lazypath="images/surplus/submit_btn.png" /> <div class="agree_btn selected"></div> <div class="policy_btn"></div> <div class="select_box province"> <div class="selected">请选择省份</div> <div class="select_list_box" style="display:none;"> <div class="select_list">T时代C5</div> <div class="select_list">T时代C3</div> <div class="select_list">T时代C45</div> <div class="select_list">T时代Ce5</div> <div class="select_list">T时代C5</div> </div> </div> <div class="select_box city"> <div class="selected">请选择城市</div> <div class="select_list_box" style="display:none;"> <div class="select_list">T时代C5</div> <div class="select_list">T时代C3</div> <div class="select_list">T时代C45</div> <div class="select_list">T时代Ce5</div> <div class="select_list">T时代C5</div> </div>
</div>
js
//判断自定义select框没有用被勾选 $(".agree_btn").on("click", function () { if ($(this).hasClass("selected")) { $(this).removeClass("selected"); } else { $(this).addClass("selected"); } }); //输入框获得焦点时 $(".leaveMsg_con input").focus(function () { var _dataValue = $(this).attr("data-value"); var _Value = $(this).val(); if (_Value == "" || _Value == _dataValue) { $(this).val(""); } }); //输入框失去焦点时 $(".leaveMsg_con input").blur(function () { var _dataValue = $(this).attr("data-value"); var _Value = $(this).val(); if (_Value == "" || _Value == _dataValue) { $(this).val(_dataValue); } }); //提交按钮 $(".submit_btn").click(function () { var _checkphone = /^[1][3-8]\d{9}$/; var _checkEmail = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/; var _param = { "name": $(".name input").val(), "webId": $(".webId input").val(), "province": _province, "city": _city, "address": $(".address input").val(), "phone": $(".tel input").val(), "email": $(".email input").val() } if (_param.name == "" || _param.name == "在此输入您的姓名") { alert("请输入姓名!"); return; } if (_param.webId == "" || _param.webId == "在此输入您的微博ID") { alert("请输入微博ID!"); return; } /***************选择省市开始 ********/ var _province = $(".province .selected").html(); var _city = $(".city .selected").html(); if (_province == "请选择省份") { alert("请选择省份"); return; } if (_city == "请选择城市") { alert("请选择城市"); return; } /*************** 选择省市结束********/ if (_param.address == "" || _param.address == "在此输入您的地址") { alert("请输入您的地址!"); return; } if (_param.phone == "" || _param.phone == "在此输入您的电话") { alert("请输入手机号码!"); //$(".alert_not_null_popup").show(); return; } if (!_checkphone.test(_param.phone)) { alert("手机号码格式不正确!"); //$(".alert_wrong_popup").show(); return; } if (_param.email == "" || _param.email == "在此输入您的电子邮件") { alert("请输入电子邮件!"); return; } if (!_checkEmail.test(_param.email)) { alert("电子邮件格式不正确!"); return; } if (!($(".agree_btn").hasClass("selected"))) { alert("请勾选同意隐私政策!"); return; } CmnAjax.PostData("/ajax/Ajax.aspx.cs?method=KeepUserInfo", _param, function (dat) { if (dat.IsSuccess == "1") { //提交成功 AnimateFrame.SlideTo("thankPage"); setTimeout(function () { $("input").val(""); }, 3000); //提交成功之后添加检测 } else if (dat.IsSuccess == "2") { //输入的号码已存在 $(".alert_alread_popup").show(); }else { alert("用户信息提交失败!"); } }); });
时间: 2024-10-05 14:57:22