前段时间女神被高富帅啪啪啪后甩了，约我出去散心聊会天！ 尼玛我心里想屌丝活该当备胎么！！ 尼玛我居然还屁颠屁颠的去的！
尼玛我一到那，女神微笑着对我说：“你来啦”
然后眼泪开始在眼睛里打转！！趴在桌子上哭了起来！！
尼玛我还澄清在女神的微笑中，来之前心里还发狠再不爱女神了！！！
尼玛！女神扑到我怀里痛哭！！尼玛让我抱着她！！
尼玛然后就抱着我亲了起来！！尼玛尼玛尼玛！！
我推开女神，故作淡然的对女神道：“别这样，我永远守护着你，但你别伤害自己”
当时我说完感觉自己特爷们，大家是不是觉得特屌丝！ 换你来 你也这样
之后 女神坐在那发呆，忘了在身边的备胎我，
我拍拍女神的肩膀，心里不舒坦就哭出来吧，别憋在心里。然后我从口袋里拿出一包心相印对她晃了晃，心里苦笑，作为一个单身男性，口袋里怎么可能没纸巾呢。
------------------------------------------------------ 屌丝分割线------------------------------------------------------
直播！！不停更新
开始我们的讲堂，今天教大家如何写表单验证
刚涉及javascript的朋友肯定会急切的想弄清楚那些大网站他们的注册时验证的效果是怎样做的，而身为屌丝的你 为什么只能写出 系统弹框这种傻不拉及的验证出来！！
有的同学会说，老子会用百度啊，需要你来说么，一搜一大把， 但是真正有几个人 细心的揣摩了别人的写法，而不是拿来就用的
顺便说点关于我的题外话，今天面试了一位刚毕业的大学女生来面试网页制作开发这个职位，据了解后才知道，这个女生在大学的专业是学的法律！ 为什么会跑来应聘网页制作了， 据她说 她是因为她的朋友也是做这个的 工资快1W多了，所以她就学起这个了，她朋友教了她3,4个月，今天来我们公司做了我那份笔试题后 跟前台说 准备走的，说是答得不好。我看了一下 就答了3题 而且都是错的，我就面试跟她聊了聊， 她期望的工资是4K ！ 我日 跟朋友学了3个月CSS 还没毕业 胃口倒不笑，对我们这些对编程本身抱有兴趣的同志们来说 真是一种前所未有的打击和自卑， 我刚来上海那会 工资1K多 ，尼玛我还搞了3个月。前面说的不是针对那个女大学生，就事想起来了点。还有应聘奇葩的， 什么湖南邵阳精英培训学校，尼玛都是些 18岁左右的少男少女跑来找工作，简历上工作经验写的 2年多！！！有木有！！ 15岁 你丫就开始编程了呀！！ 而且你丫要8K的工资！ 真心拿不出词评价这些人，很多人都冲着 工资高，办公空间 而中途选择培训学校 接触网络编程这行， 其实能理解， 这个社会已经这样了。
又说了这么多！！ 我擦 大家别急！！慢慢看下面
表单验证作为一个前台拦截的方式呈现给用户方便了系统和用户最好的 用户体验方式 避免了过多的请求
让验证炫起来
制作滑动验证效果的表单验证
代码比较糙，因为现在直播手写的这些DEMO ， 所以比较随意，JS 和JQUERY 也会有时同时出现，主要是为了效果，所以这些细节大家暂时别考虑，
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>【屌丝学堂】-哭泣的小丑</title>
<script src="http://code.jquery.com/jquery-1.8.0.js"></script>
<style>
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend, input,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;float:left;}select, input, button,button img, label {vertical-align: middle;}body {font:normal 12px/1.5 "Microsoft Yahei","微软雅黑",Tahoma,Arial,Helvetica,STHeiti; webkit-font-smoothing:antialiased;-moz-font-smoothing: subpixel-antialiased; color:#666;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}table {border-collapse: collapse;border-spacing: 0;}em {font-style: normal}
select, input, button, button img, label {vertical-align:middle;}input {font-family:"Microsoft Yahei","微软雅黑";webkit-font-smoothing:antialiased;-moz-font-smoothing: subpixel-antialiased}input, input:focus, button, button:focus, select,textarea, textarea:focus {outline:none; -moz-outline:none; -webkit-outline:none; }input:focus { outline:none; -moz-outline:none; -webkit-outline:none; }textarea {resize:none;}
a {color:#666; text-decoration:none;} a:hover {text-decoration:underline; }a:focus {outline:none; -moz-outline:none;-webkit-outline:none;}body {min-width: 960px;}
/**
* by 蓝色理想论坛-哭泣的小丑
*/
.form-main{width:700px;margin:0 auto;padding-top:40px;}
.form-ipt-box{
padding: 10px 0 10px 0px;
position:relative;
}
.form-ipt-box .ipt{
font-size: 14px;
background:url([url]http://staticfile.tujia.com/portalsite2/images/tInput.png[/url]);
width:200px;
height:28px;
border:1px solid #ccc;
position:absolute;
z-index:99;
float:left;
margin-left:5px;
margin-top:3px;
}
.form-main .btnsp{
background-position: -202px -33px;
width: 97px;
height: 34px;
display: inline-block;
margin-left:45px;
}
.form-ipt-box .btn{
width: 95px;
height: 32px;
background-position: 0 -35px;
background-color: #DDD;
cursor: pointer;
}
.form-main .btnsp , .form-ipt-box .btn{
background:#ddd url([url]http://su.bdimg.com/static/superpage/img/spis_a9e8de8e.png[/url]) no-repeat;
}
.form-ipt-box span {
line-height: 30px;
width: 70px;
height: 30px;
font-size: 14px;
z-index:99;
}
.abs{position:absolute;}
.x-slider{
text-align:right;
background:#FF6;
width:250px;
height:36px;
left:36px;
line-height:30px;
color:#f00;
}
</style>
</head>
<script>
function dsform(){
var password=document.getElementById("Password");
var email = document.getElementById("Email").value;
var a = email.indexOf("@");
var b = email.lastIndexOf(".");
if(email==""){
$("#x-email").css("visibility","visible");
$("#x-email").animate({width:400},"slow");
$("#x-email").html("邮箱不能为空！");
return;
}
else if(a<1||(b-a)<2 ){
$("#x-email").css("visibility","visible");
$("#x-email").animate({width:300},"slow");
$("#x-email").html("邮箱格式错误！");
return;
}
else if(password.value==""){
$("#x-email").css("visibility","hidden");
$("#x-password").css("visibility","visible");
$("#x-password").animate({width:300},"slow");
$("#x-password").html("密码不能为空！");
return ;
}
else{
alert("Ok");
document.getElementById("ds-form").submit();
}
}
</script>
<body>
<div class="form-main">
<form id="ds-form">
<div class="form-ipt-box">
<span>邮箱：</span>
<div >
<input type="text" class="ipt" id="Email">
<div class="x-slider" id="x-email" style="visibility:hidden;"></div>
</div>
<div class="form-ipt-box">
<span>密码：</span>
<div >
<input type="password" class="ipt" id="Password">
<div class="x-slider" id="x-password" style="visibility:hidden;"></div>
</div>
</div>
</div>
<div class="form-ipt-box">
<span class="btnsp">
<input type="button" class="btn"onclick="dsform()" value="登录">
</span>
</div>
</form>
</div>
</body>
</html>
由于iteye 没有可运行代码的功能 所以不能更好的给大家演示效果
以后写的博客demo 会带附件
分享到：
相关推荐
镜心小屌丝聊天机器人,是一款自足行为软件，试试还不错，你问什么他答什么，就是有时候有点让你想象不到。
在Android应用开发中，"Retrofit+Rxjava+MVP组合屌丝APP"是一个典型的技术栈，用于构建高效、可维护的网络请求和数据管理框架。这个APP结合了多种热门技术，使得开发者能够轻松地处理网络接口调用、数据流管理和用户...
4. **SEO优化**：“屌丝青年网”的SEO策略也应融入到“LIiu-One”中，这涉及HTML结构的优化、元标签的设置、以及可能需要的SEO插件集成。 5. **性能优化**：为了提高加载速度，我们可以对CSS和JavaScript进行合并和...
(糗事百科、暴走漫画)屌丝程序员如何一个人打造日PV百万的网站架构
在IT领域，重装系统是一项常见的操作，尤其对于那些不熟悉技术的“屌丝”用户来说，可能是一项挑战。然而，随着技术的发展，现在有了许多简单易用的一键重装系统工具，使得这个过程变得相对轻松。本文将详细介绍如何...
看陆贞传奇 品屌丝站长励志神话.docx
今天我们要探讨的是一款专为程序员设计的"把妹利器"，它巧妙地结合了技术与浪漫，让你在追求心仪对象时展现出独特的魅力。这款利器的核心在于HTML，一种基础且强大的网页制作语言。接下来，我们将深入解析如何利用...
【标题】"最新网址大全源码，好123屌丝版网址导航"涉及到的是一个网站源码项目，主要用于创建一个集成了多种常用网址的导航站点，类似于知名的"好123"导航站，主要服务于广大用户，方便他们快速访问互联网上的热门和...
电影中的屌丝逆袭女神的主题，常常引发观众的共鸣，特别是在《泰囧》这部电影中，这一主题得到了淋漓尽致的展现。影片通过轻松幽默的方式讲述了普通人物王宝强如何在一系列荒诞的冒险中，实现了自己的女神梦，与...
通过研究这个Java2048屌丝逆袭版，不仅可以提升你的Java编程能力，还能增进你对游戏设计和算法的理解，甚至激发你去开发自己的游戏版本。同时，你可以参考博文链接中的内容，那里可能包含了更详细的开发过程和技巧...
蹭网屌丝专用WIFI三神 蹭网屌丝专用WIFI三神器
【标题】：“一个屌丝的读书漂流ppt模板.rar”是一个压缩文件，其中包含秦阳创作的关于“读书漂流”的PPT演示文稿模板。这个标题暗示了这是一份个人化且富有故事性的模板，可能适合那些希望通过分享阅读经历或者提倡...
屌丝专用华为版本查询.exe
1. 教育行业的逆袭：汪建宏，29岁，成为了黄冈中学网校的校长，从一名农村出身的“屌丝”实现了事业的巨大转变，展现了教育行业中个体通过努力和创新实现逆袭的可能性。 2. 梦想的力量：汪建宏强调梦想在个人成功中...
屌丝程序员如何打造日PV百万的网站架构
在SEO领域，屌丝们想要让网站排名上升，需要采取一系列的策略和技巧。以下是一些关键的站内调整和站外优化方法： 1. **站内调整与策略** - **标题关键词优化**：每个页面的title标签应该独特且包含目标关键词，...
当你下载并解压这个压缩包后，你会得到《随意门（屌丝版）》的游戏源码，这是一个H5小游戏的完整实现。通过阅读和分析这些源码，你可以了解到游戏的运行机制，包括游戏循环、事件处理、动画制作、物理碰撞检测、用户...
互联网金融的出现，尤其是对屌丝阶层的影响尤为显著，因为这一群体往往收入不高，但具备一定的网络知识和投资需求。 【互联网金融的特点】 1. **渠道变革**：互联网金融的最大变革在于渠道的改变，它打破了传统金融...