jQuery表单2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" name="viewport"> <title>表单验证</title> <style type="text/css"> *{margin:0; padding:0;} body{max-width: 640px; margin:0 auto; background-color: #E5E4E4;} /*修改谷歌浏览器（黄色）背景色问题*/ input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #e3dac0 inset; border: 0!important; } /*公共弹窗阻止浏览器底层滚动*/ .base_popup{position: fixed;width: 100%;} /*滚动头部隐藏*/ .base_fixed .m_h_fixed{top:-50px;} /*公共弹窗loading*/ .m_fixed_loading{background-color: rgba(0,0,0,.6);position: fixed;width: 100%;height: 100%;top:0;left:0;z-index: 3;} .m_fixed_loading:after{content:'';position: absolute;width: 40px;height: 40px;top: 50%;left: 50%;margin:-20px 0 0 -20px;border-radius: 50%;border: 4px solid #000;border-color: #f0cb95 transparent #f0cb95 transparent;-webkit-animation: fixedLoad 1s linear infinite;animation: fixedLoad 1s linear infinite;} @keyframes fixedLoad {0% {-webkit-transform: rotate(0);transform: rotate(0);}100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}} @-webkit-keyframes fixedLoad {0% {-webkit-transform: rotate(0);transform: rotate(0);}100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}} /*公共alert*/ .m_fixed_alert{z-index: 6;position: fixed;top:-50%;background-color: rgba(0,0,0,.6);color: #fff;padding:5px 10px;left:50%;max-width: 80%;transform: translateX(-50%);-webkit-transform: translateX(-50%);border-radius: 10px;transition: all .3s;-webkit-transition: all .3s} .fixed_alert_show{top:160px;-webkit-animation: alertAnim .3s linear;animation: alertAnim .3s linear;} @keyframes alertAnim {0% {transform: translateX(-50%);-webkit-transform: translateX(-50%);}20% {transform: translateX(-45%);-webkit-transform: translateX(-45%);}40% {transform: translateX(-55%);-webkit-transform: translateX(-55%);}60% {transform: translateX(-45%);-webkit-transform: translateX(-45%);}80% {transform: translateX(-55%);-webkit-transform: translateX(-55%);}100% {transform: translateX(-50%);-webkit-transform: translateX(-50%);}} @-webkit-keyframes alertAnim {0% {transform: translateX(-50%);-webkit-transform: translateX(-50%);}20% {transform: translateX(-45%);-webkit-transform: translateX(-45%);}40% {transform: translateX(-55%);-webkit-transform: translateX(-55%);}60% {transform: translateX(-45%);-webkit-transform: translateX(-45%);}80% {transform: translateX(-55%);-webkit-transform: translateX(-55%);}100% {transform: translateX(-50%);-webkit-transform: translateX(-50%);}} /*公共弹窗loading*/ .m_fixed_loading{background-color: rgba(0,0,0,.6);position: fixed;width: 100%;height: 100%;top:0;left:0;z-index: 3;} .m_fixed_loading:after{content:'';position: absolute;width: 40px;height: 40px;top: 50%;left: 50%;margin:-20px 0 0 -20px;border-radius: 50%;border: 4px solid #000;border-color: #f0cb95 transparent #f0cb95 transparent;-webkit-animation: fixedLoad 1s linear infinite;animation: fixedLoad 1s linear infinite;} @keyframes fixedLoad {0% {-webkit-transform: rotate(0);transform: rotate(0);}100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}} @-webkit-keyframes fixedLoad {0% {-webkit-transform: rotate(0);transform: rotate(0);}100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}} .demo{ height: 50px; overflow: hidden; background-color: #fff; } .demo span{ display: inline-block; height: 30px; line-height: 30px; padding: 0 10px; border:1px solid red; margin:5px 0 0 10px; border-radius: 5px; cursor: pointer; } .m_h_search{margin:8px 10px;position: relative;display: none;} .m_h_input{width: 100%;height: 40px;border-radius: 5px;border:1px solid #d6d6d6;box-sizing: border-box;padding:0 60px 0 10px;} .m_h_submit{position: absolute;background-color: #e22d2d;color: #fff;text-align: center;right:0;top:1px;width:60px;height: 38px;line-height: 40px;box-sizing: border-box;border-top-right-radius: 5px;border-bottom-right-radius: 5px;} </style> </head> <body> <div class="demo"> <span id="showOrderSearch">我的订单</span> </div> <div class="m_h_search" id="orderSearch"> <input class="m_h_input" id="orderSearchInput" type="text" name="phone" placeholder="输入您下单的手机号码"> <input class="m_h_submit" id="orderSearchSubmit" type="submit" value="查询"> </div> <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> <script src="form.js" type="text/javascript"></script> </body> </html>
js代码：
var app = { // 公共单元模块 unit:{ // 默认浏览器scrollTop sTop: 0, //loading当前对象 loadObj:'', //msg当前对象 msgObj:'', //timer定时器 timer:'', // 公共load浮窗 fixedLoad:$('#fixedLoad'), // 公共alert浮窗 fixedAlert:$('#fixedAlert'), // 设置弹窗底层定位 setPopup:function(){ this.sTop = $(document).scrollTop(); $("body").addClass('base_popup'); $('body').css('top', -this.sTop); }, // 撤销设置弹窗底层定位 unsetPopup:function(){ $("body").removeClass('base_popup'); $(document).scrollTop(this.sTop); }, //loading showLoad:function(){ this.loadObj=$('<div class="m_fixed_loading"></div>'); this.loadObj.appendTo('body'); this.setPopup(); }, closeLoad:function(){ this.loadObj.remove(); this.unsetPopup(); }, //弹窗msg,默认2秒消失 msg:function(title){ var that=this; //防止错误提示层叠 if(this.msgObj){ this.msgObj.remove(); clearTimeout(this.timer); } this.msgObj && this.msgObj.remove(); this.msgObj=$('<div class="m_fixed_alert">'+title+'</div>'); this.msgObj.appendTo('body').addClass('fixed_alert_show'); this.timer=setTimeout(function(){ that.msgObj && that.msgObj.remove(); },2500) }, }, //点击显示搜索 showSearch: function(){ var that = this; var orderSearch = $('#orderSearch'); if(!orderSearch.length) return; var phontInput = $('#orderSearchInput'); $('#showOrderSearch').on('click',function(){ //切换显示隐藏 if(orderSearch.is(':hidden')){ orderSearch.show(); //是否有本地存储用户手机号 if (window.localStorage && localStorage.getItem('userPhone')) { phontInput.val(localStorage.getItem('userPhone')); } }else{ orderSearch.hide(); } }) // 查询订单 $("#orderSearchSubmit").on('click',function () { var msg = '', phoneVal = phontInput.val(); if (phoneVal == '') { msg = '手机号必须填写'; } else if (!(/^1(3|4|5|7|8)\d{9}$/.test(phoneVal))) { msg = '请输入正确的手机号'; } //判断表单数据是否正确 if (msg != '') { // 设置弹窗信息 that.unit.msg(msg); }else{ //设置本地存储，safari无痕模式下不支持本地储存 if (window.localStorage) { try { localStorage.setItem('userPhone', phoneVal); } catch (e) { } } // 验证成功直接跳转 window.location.href = '/yixuefu/user/' + phoneVal + '.html'; } }); } } $(function() { //遍历执行app中的方法 for (var key in app) { typeof app[key] == 'function' && app[key](); } })
浙公网安备 33010602011771号