<!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]();
}
})
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](); }})
转载于:https://www.cnblogs.com/huanghuali/p/9334172.html
