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 安装包
Oracle Database 10g Release 2 (10.2.0.1.0) Enterprise/Standard Edition for Microsoft Windows (32-bit ...
- Cardboard Talk02 Accelerometer
操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Android studio 3.0.0 | Cardboard 1.0 在深入讨论具体实现之前,有必要了解一下Andro ...
- JAVA Spring MVC中各个filter的用法
spring mvc的org.springframework.web.filter包下的Java文件如下: 类的结构如下: AbstractRequestLoggingFilter及其子类 Abstr ...
- JAVA获取时间的方式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 ...
- Spring boot 、swagger、c3p0、mybatis和redis 整合
文件路径 添加依赖 <?xml version="1.0" encoding="UTF-8"?> <projec ...
- nginx 负载均衡 使用ip_hash方式解决session问题 测试
ip_hash的方式比较弱智,但是在一般情况下是挺有效的~~,如果能保证nginx是最上一层的代理,那么能够得到用户的ip是真实位置,就能做到负载,但是一家公司的所有员工其实走的是同一个ip,那么在这 ...
- 20155209 2016-2017-2 《Java程序设计》第七周学习总结
20155209 2016-2017-2 <Java程序设计>第七周学习总结 教材学习内容总结 认识时间与日期 时间的度量 GMT(Greenwich Mean Time) 时间:现在不是 ...
- 懒人的ERP开发框架--2B&苦B程序员专用
在企业内部的ERP系统开发中,如果使用MS的技术,那么Winform + DevExpress + IIS + WCF +EF 就是懒人的黄金组合了,EF使用数据库优先,一般ERP应用主要关注点在数据 ...
- CSS定位DIV（一）一列样式
前记:CSS样式核心就是DIV布局,一些基础知识省略不记,接下来的日志只关注最核心的布局问题. 一.一列布局 1.固定宽高 直接声明宽高,或用百分比表示. width:400px; 或 width:7 ...
- awk基础03-分支和循环语句
awk既然是一门解释型语言,则就可以支持如分支语句.循环语句等.今天就来学习一下在awk中的分支和循环语句.如果您有过任何一门编程语言的基础,则下面所讲内容也是很好理解的. 分支语句 if-e ...