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表单验证 默认的提示 < ...
随机推荐
- 如何用MaskBlt实现两个位图的合并，从而实现背景透明
我有两个位图,一个前景图,一个背景图(mask用途).请问如何用MaskBlt实现两个位图的合并,从而实现背景透明! 核心代码:dcImage.SetBkColor(crColour);dcMask. ...
- Linux C多线程实现生产者消费者
今天学习了用Linux C进行线程的同步,实现类似生产者消费者的问题.下面我就来分享我的代码 #include<stdio.h> #include<pthread.h> #in ...
- 【poj3254】Corn Fields 状态压缩dp
AC通道:http://vjudge.net/problem/POJ-3254 [题目大意] 农夫约翰购买了一处肥沃的矩形牧场,分成M*N(1<=M<=12; 1<=N<=12 ...
- 网页截图API接口，一键自动生成网页截图
背景 最近在开发一个小程序,其中有一个帮助模块,内容为帮助文章列表,文章内容为网站后台编辑的富文本格式.鉴于小程序的特殊性,其对html格式的富文本支持并不友好. 刚开始有人开发了wxparse插件, ...
- git 常见报错
1. refusing to merge unrelated histories : 拒绝合并无关的历史 teminal中输入 git pull origin master --allow-unrel ...
- Docs命令大全 备用
#1 一: net use \\ip\ipc$ " " /user:" " 建立IPC空链接 net use \\ip\ipc$ "密码" ...
- Step By Step Hibernate Tutorial Using eclipse WTP[z]
[shivasoft.in/blog/sql/myqsl/step-by-step-hibernate-tutorial-using-eclipse-wtp/] Hibernate is the O ...
- Golang之字符串操作（反转中英文字符串）
//字符串反转package main import "fmt" func reverse(str string) string { var result string strLe ...
- 关于流程图设计，你需要Get的几点必备知识
流程图(Flow Chart)这个概念对很多人来说并不陌生,但如果让你定义或者举例说明什么是产品流程图,恐怕还是有难度的.或许诸如“用户体验”.“交互设计”.“逻辑关系”等词会像走马灯般闪现在你的脑海 ...
- .net分布在指定文件夹的web.confgi或者app.config
.Net里面,ConfigurationManager默认读取的是Web.config或者App.config但是,什么都放在这两个文件里面,感觉太多了,也不好管理配置.于是参考了下别人的资料,自己写 ...