【屌丝学堂】表单验证，元芳你怎么看？ -

yuruei2000

浏览: 34111 次
性别:
来自: 上海

最近访客更多访客>>

chentging

kaiserlu

a512154224

咖啡骑士

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

【屌丝学堂】表单验证，元芳你怎么看？

博客分类：

屌丝学堂

前段时间女神被高富帅啪啪啪后甩了，约我出去散心聊会天！尼玛我心里想屌丝活该当备胎么！！尼玛我居然还屁颠屁颠的去的！
尼玛我一到那，女神微笑着对我说：“你来啦”
然后眼泪开始在眼睛里打转！！趴在桌子上哭了起来！！
尼玛我还澄清在女神的微笑中，来之前心里还发狠再不爱女神了！！！
尼玛！女神扑到我怀里痛哭！！尼玛让我抱着她！！
尼玛然后就抱着我亲了起来！！尼玛尼玛尼玛！！
我推开女神，故作淡然的对女神道：“别这样，我永远守护着你，但你别伤害自己”
当时我说完感觉自己特爷们，大家是不是觉得特屌丝！换你来你也这样
之后女神坐在那发呆，忘了在身边的备胎我，
我拍拍女神的肩膀，心里不舒坦就哭出来吧，别憋在心里。然后我从口袋里拿出一包心相印对她晃了晃，心里苦笑，作为一个单身男性，口袋里怎么可能没纸巾呢。

------------------------------------------------------ 屌丝分割线------------------------------------------------------
直播！！不停更新
开始我们的讲堂，今天教大家如何写表单验证
刚涉及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 会带附件

【屌丝学堂】滑动表单验证.zip (2.1 KB)
下载次数: 9

0
顶

1
踩

分享到：

【屌丝学堂】跟我学JS封装-第二课

2012-10-24 17:57
浏览 1478
评论(4)
分类:Web前端
查看更多

4 楼 haohao-xuexi02 2012-10-25

我只是来看开头的……

3 楼 w2oscar 2012-10-25

我也是来看开头的...文采飞扬的..

2 楼 TheMatrix 2012-10-24

我只是来看开头的……

1 楼 CaryGao 2012-10-24

女神还能亲你，某些屌丝连女神手都没亲过，知足吧，在这个高富帅的世界。

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

【屌丝学堂】表单验证，元芳你怎么看？

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

【屌丝学堂】表单验证，元芳你怎么看？

评论

发表评论

相关推荐

【屌丝学堂】跟我学JS封装-第二课

【屌丝学堂】跟我学JS封装-第一课

最近访客更多访客>>