前段时间女神被高富帅啪啪啪后甩了，约我出去散心聊会天！ 尼玛我心里想屌丝活该当备胎么！！ 尼玛我居然还屁颠屁颠的去的！
尼玛我一到那，女神微笑着对我说：“你来啦”
然后眼泪开始在眼睛里打转！！趴在桌子上哭了起来！！
尼玛我还澄清在女神的微笑中，来之前心里还发狠再不爱女神了！！！
尼玛！女神扑到我怀里痛哭！！尼玛让我抱着她！！
尼玛然后就抱着我亲了起来！！尼玛尼玛尼玛！！
我推开女神，故作淡然的对女神道：“别这样，我永远守护着你，但你别伤害自己”
当时我说完感觉自己特爷们，大家是不是觉得特屌丝！ 换你来 你也这样
之后 女神坐在那发呆，忘了在身边的备胎我，
我拍拍女神的肩膀，心里不舒坦就哭出来吧，别憋在心里。然后我从口袋里拿出一包心相印对她晃了晃，心里苦笑，作为一个单身男性，口袋里怎么可能没纸巾呢。
------------------------------------------------------ 屌丝分割线------------------------------------------------------
直播！！不停更新
开始我们的讲堂，今天教大家如何写表单验证
刚涉及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 会带附件
分享到：
相关推荐
这款APP包含各种类型新闻，各种美女图片，图文笑话和搞笑视频。包含技术有Retrofit，Rxjava，Glide，MVP组合屌丝APP。
镜心小屌丝聊天机器人,是一款自足行为软件，试试还不错，你问什么他答什么，就是有时候有点让你想象不到。
基于屌丝青年网样式二次开发的WordPress主题：LIiu-One主题 请勿商业运营,违法使用和传播!仅供研究学习使用!
(糗事百科、暴走漫画)屌丝程序员如何一个人打造日PV百万的网站架构
看陆贞传奇 品屌丝站长励志神话.docx
最新网址大全源码，好123屌丝版网址导航
seo的屌丝们，如何让网站提高排名？.docx
酷炫的效果，祝你赢得妹子的欢心，早日解决单身问题！
29岁的黄冈中学网校校长汪建宏 屌丝逆袭.docx
从《泰囧》看那些屌丝逆袭女神的传奇.pdf
重装系统
蹭网屌丝专用WIFI三神 蹭网屌丝专用WIFI三神器
屌丝专用华为版本查询.exe
送给大家的福利 屌丝程序员向女神表白专用神器 不表你就白了
屌丝程序员如何打造日PV百万的网站架构
一个屌丝的读书漂流，秦阳ppt作品。
Android应用源码屌丝程序员表白神器.zip
小游戏源码-真屌丝鉴定.rar