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]();
}
})
jQuery表单2的更多相关文章
- Jquery表单提交后获取返回Json值
1.给form添加id值: <form action="/News/SaveMessage" method="post" accept-charset=& ...
- Jquery表单序列化和AJAX全局事件
Jquery表单序列化 1.必须放在form标签内: 2.控件必须有name属性: 3.控件的value值会提交到服务器: 如: <form id="form1"> & ...
- 【jquery】Validform，一款不错的 jquery 表单验证插件
关于 Validform 这是一款很不错的 jquery 表单验证插件,它几乎能够满足任何验证需求,仅仅一行代码就能搞定整站的表单验证. $('form').Validform(); 为什么能如此方便 ...
- 【jQuery基础学习】06 jQuery表单验证插件-Validation
jQuery的基础部分前面都讲完了,那么就看插件了. 关于jQuery表单验证插件-Validation validation特点: 内置验证规则:拥有必填.数字.E-Mail.URL和信用卡号码等1 ...
- python_way day17 jQuery表单验证，事件绑定，插件，文本框架，正则表达式
python_way day17 1.jQuery表单验证 dom事件绑定 jquery事件绑定 $.each return值的判断 jquery扩展方法 2.前段插件 3.jDango文本框架 4. ...
- jquery表单验证使用插件formValidator
JQuery表单验证使用插件formValidator 作者: 字体:[增加 减小] 类型:转载 时间:2012-11-10我要评论 jquery表单验证使用插件formValidator,可供有需求 ...
- jQuery打造用户注册时获取焦点文本框出现提示jquery表单特效
jQuery打造用户注册时获取焦点文本框出现提示效果的jquery表单特效 当获取焦点时,会分别的弹出相应的信息提示框,失去焦点就会隐藏提示信息. 效果兼容性很高,适用浏览器:IE6.IE7.IE8. ...
- jQuery 表单验证插件 jQuery Validation Engine 使用
jQuery 表单验证插件 jQuery Validation Engine 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面),指定使用 jQuery Validation Engi ...
- jQuery表单验证以及将表单序列化为json对象小练习
jquery表单验证(非实时验证),同时,将表单序列化为json对象提交表单. <!DOCTYPE html> <html lang="en"> <h ...
- JQuery 表单验证--jquery validation
jquery validation,表单验证控件 官方地址 :http://jqueryvalidation.org/ jquery表单验证 默认值校验规则 jquery表单验证 默认的提示 < ...
随机推荐
- Oracle安装过程出现问题---------安装Oracle11gR2先决条件检查失败
一.错误信息当安装到“先决条件检查” 时,提示如下图所示的错误: 二.错误原因一般情况下,由于操作系统未开启默认共享,导致Oracle无法检查环境的可用性. 三.解决方法1.在运行中(或键盘按 Win ...
- vue.js常见面试题及常见命令介绍
Vue.js介绍 Vue.js是JavaScript MVVM(Model-View-ViewModel)库,十分简洁,Vue核心只关注视图层,相对AngularJS提供更加简洁.易于理解的API.V ...
- Angular: Can't bind to 'ngModel' since it isn't a known property of 'input'问题解决
https://blog.csdn.net/h363659487/article/details/78619225 最初使用 [(ngModel)] 做双向绑定时,如果遇见Angular: Can't ...
- python 画直方图
import numpy as npimport matplotlib.pyplot as plt def sample_data(size,length=100): data=[] for i in ...
- 浅探SpringMVC中HandlerExecutionChain之handler、interceptor
讲解HandlerExecutionChain之前,先大致了解下SpringMVC的核心开发步骤: 在web.xml中部署DispaterServlet,并配置springmvc.xml等文件; 将映 ...
- ORACLE DBLINK 使用
CREATE PUBLIC DATABASE LINK MYDBLINK CONNECT TO RAMS IDENTIFIED BY RAMS USING '(DESCRIPTION =(ADDRES ...
- 我们常说的CDN到底是什么？
程序员每天提及的无数词当中,有一个是「CDN」,Ta的中文名是「内容分发网络」,读中文是令人蒙逼的,英文名是Content Delivery Network. CDN有啥用呢?它主要用来解决什么问题呢 ...
- appium镜像设置
npm --registry http://registry.cnpmjs.org install -g appium 使用npm的国内镜像可以安装,速度很不错. 以后不想输入ip的话可以输入以下命令 ...
- apicloud 和 微信小程序，你会用哪 个?
微信 小程序开始火了,app跨平台的革命再次高涨,不得不说,不用再担心android和ios双版本开发成本,及h5的开发 和apicloud一样,不需要关注平台问题,只需要关注前端js.css就能大a ...
- 看图说说class文件结构（部分）