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表单验证 默认的提示 < ...
随机推荐
- 解决no-session延迟加载问题
解决no-session延迟加载问题 说明:dao层使用Hibernate从数据库查询数据信息返回给web层,在web层打印信息报no-Session错误, 产生原因 关联对象默认都是采用延迟加载 事 ...
- 查看http的并发请求数及其TCP连接状态
统计80端口的连接数据 netstat -nat | grep -i "80" | wc -l 统计httpd协议连接数 ps -ef | grep httpd | wc -l 统 ...
- 微软AntiXSS防止xss攻击类库
AntiXSS,由微软推出的用于防止XSS攻击的一个类库,可实现输入白名单机制和输出转义. AntiXSS最新版的下载地址:http://wpl.codeplex.com 下载安装之后,安装目录下有以 ...
- sqlserver2014新特性
1.SQL Server 2014新特性探秘(1)-内存数据库 在传统的数据库表中,由于磁盘的物理结构限制,表和索引的结构为B-Tree,这就使得该类索引在大并发的OLTP环境中显得非常乏力,虽然有很 ...
- send anywhere真的好用啊
手机和电脑互传文件,方便很多.
- hashlib 算法介绍
Python的hashlib提供了常见的摘要算法,如MD5,SHA1等等. 什么是摘要算法呢?摘要算法又称哈希算法.散列算法.它通过一个函数,把任意长度的数据转换为一个长度固定的数据串(通常用16进制 ...
- 第四章 Windows的图形设备接口及Windows绘图 P83 4-6
实验(实习)名称 图形程序设计及其应用 实验(实习)日期 一.实验目的 1．熟悉图形设备接口的概念及其应用. 二.实验内容及步骤 实验任务 1.熟悉基于图形应用的程序设计: 2.掌握刷新技术及其 ...
- Windows10远程桌面连接配置
被控电脑在TP-Link路由器 1.基本设置 被控端电脑设置:1)被控端的电脑系统需要是Windows专业版或者企业版,家庭中文版的系统是不支持远程访问功能的: 2)被控端打开远程桌面功能,在系统的设 ...
- python性能测试脚本-乾颐堂
废话不多说,直接上代码. import httplib import urllib import time import json class Transaction(object): ...
- 关于InvokeMethod Activity的异步调用
讨论地址:http://www.cnblogs.com/foundation/archive/2009/12/17/1626617.html 结论是IsCompleted的设置被忽略,看代码里注释 u ...