瑞金佬的前端路

如果你是刚进入web前端研发领域，想试试这潭水有多深，看这篇文章吧；
如果你是做了两三年web产品前端研发，迷茫找不着提高之路，看这篇文章吧；
如果你是四五年的前端开发高手，没有难题能难得住你的寂寞高手，来看这篇文章吧；

web前端研发工程师，在国内是一个朝阳职业，自07-08年正式有这个职业以来，也不过三四年的时间。这个领域没有学校的正规教育，没有行内成体系的理论指引，几乎所有从事这个职业的人都是靠自己自学成才。自学成才，一条艰辛的坎坷路，我也是这样一路走来。从2002年开始接触web前端研发至今已然有了9个年头，如今再回首，期间的走了很多弯路。推已及人，如果能让那些后来者少走些弯路，辛甚辛甚！

5.3版主要更新以下功能： 详细说明请访问这里

• Validform对象增加了config方法；
• 表单元素上可以绑定sucmsg属性了，用来指定验证成功时的提示文字；
• 修改了信息提示方式，对于没有绑定errormsg的对象，会根据所绑定的datatype输出相应的出错信息；
  对于没有绑定nullmsg的对象，会自动查找类名为Validform_label下的文字作为提示文字；
• 如果页面里没有显示出错信息的标签，会根据tiptype值自动创建；
• 改变了ajax错误的处理方式，callback函数在ajax提交表单遇服务端错误时也会执行；
• Validform对象的submitForm()和ajaxForm()方法增加了url参数，如果传入了url参数，表单将会提交到这个地址而不是表单action属性或config方法里所指定的地址；
• 细节功能增强：当提交表单时，如果表单中的某项已经在执行ajax检测，这时该项ajax结束后表单可以继续提交了；
• 修改了tipSweep参数的含义，当传入tipSweep=true时，只在表单提交时触发检测，blur事件将不会触发检测（实时验证会在后台进行，不会显示检测结果）；
• 修正了check方法的bug，修正了绑定ignore时，ajaxurl不能执行的问题等；
• 插件的调用做了点改进，对于日期、swfupload和密码强度检测这三个插件，绑定了plugin属性即可以初始化对应的插件，可以不用在validform初始化时传入空的 usePlugin；修改使用addRule方法绑定验证时，插件不能初始化的bug；
• 修正了ie6下自定义提交按钮时表单不能提交的问题。

在某些chrome浏览器下，css里设置的10号字体竟然不起作用！仍显示12号大小，对比firefox、ie6、7、8、9，他们的显示都是好的。要是你也碰到这问题，可以这样解决：

1

-webkit-text-size-adjust: none;

在css里加上这一句就可以。
如你的样式是这样写的：

1
2
3
4

.copyright{
    font-size:10px;
    background-color:#eee;
}

给copyright加上-webkit-text-size-adjust就可以了：

1
2
3
4
5

.copyright{
    font-size:10px;
    background-color:#eee;
    -webkit-text-size-adjust: none;
}

有很多项目经常会需要判断图片加载完成后执行相应的操作，或者需要图片延迟加载，网上虽然已经有很不错的插件，但要为这些效果还得单独加载一个插件的话总感觉有点不舒服，干脆自己写了个方法：

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

function loadimg(arr,funLoading,funOnLoad,funOnError){
	var numLoaded=0,
	numError=0,
	isObject=Object.prototype.toString.call(arr)==="[object Object]" ? true : false;
 
	var arr=isObject ? arr.get() : arr;
	for(a in arr){
		var src=isObject ? $(arr[a]).attr("data-src") : arr[a];
		preload(src,arr[a]);
	}
 
	function preload(src,obj){
		var img=new Image();
		img.onload=function(){
			numLoaded++;
			funLoading && funLoading(numLoaded,arr.length,src,obj);
			funOnLoad && numLoaded==arr.length && funOnLoad(numError);
		};
		img.onerror=function(){
			numLoaded++;
			numError++;
			funOnError && funOnError(numLoaded,arr.length,src,obj);
		}
		img.src=src;
	}
 
}

在线demo及文档请点击这里查看

Validform v5.0 发布了！

• 重构了代码；
• 执行表单验证可以获取到一个Validform对象，这个对象有如下几个属性和方法：tipmsg、dataType、eq(n)、resetStatus()、ajaxPost(flag,sync)、abort()、submitForm(flag)、resetForm()；
• 去除”radio、checkbox、select”类型，可以在这3类表单元素上绑定任意datatype类型了；
• 在自定义datatype里可以返回具体的错误信息；
• 动态增加的表单元素也能有验证效果；
• 增加了表单美化插件；
• 去除”option_”。之前版本实现二选一的验证效果时自定义的datatype名称需要加上”option_”前缀，5.0版开始不用加这个前缀了；
• 在自定义datatype中，可以获取到内置的一些正则；
• callback修正，之前很多网友反映在.net下验证后不能执行后台事件，这次修正了这个问题。

  在非ajax提交表单时，会先执行callback然后判断是否提交表单，如果callback里明确return false，则表单不会提交，如果return true或没有return，则会提交表单；

• beforeCheck里明确return false的话将不会继续执行验证操作，beforeSubmit里明确return false的话表单将不会提交；
• 增加btnReset参数；
• 增加ignoreHidden参数。

CSS3实现动画效果有两种形式：transition和animation。【针对不同的浏览器，前面要加上相应的前缀，如-moz-transition:…】

transition：
transition:property duration timing-function [,property duration timing-function]

也可以分开写：
transition-property: background-color;
transition-duration: 1s;
transition-timing-function: linear;

property：要变换的css属性名称；
duration：动画时长；
timing-function：过渡效果。

animation：
animation: name duration timing-function;

也可以分开写：
animation-name: keyframe_name;
animation-duration: 1s;
animation-timing-function: linear;

name：定义的关键帧名字；
duration：动画时长；
timing-function：过渡效果。

animation功能与transition都能通过改变css的属性值来实现动画效果，他们的不同之处是：transition只能指定属性的开始值和结束值来达到渐变，不能像animation那样定义关键帧来实现比较复杂的动画效果。

在线demo及文档请点击这里查看

Validform v4.0 更新增强以下功能：

• 增加了usePlugin参数，实现调用外部插件；
• 增加showAllError参数，传入该参数可以在提交表单时显示所有错误提示；
• postonce=true时，只有当成功提交后才不能再次提交表单，在提交出错时还可以继续提交表单；
• 修正了实时验证的表单元素会重复触发验证请求的bug；
• 修正$.Showmsg调用报错的bug；
• 点击重置按钮时可以重置表单的错误提示。

主要增强了以下功能：

1，实时验证在后台文件中还可以接收到name参数，改参数值为当前表单元素的name属性值。可以通过该值来判断是哪个文本框请求处理，这样当有多个实时验证请求时可以指定同一个文件处理；

2，callback增强。如果不是ajax方式提交表单传入callback回调，那么表单在全部验证通过后将不会提交，而是执行该回调函数；

3，自定义datatype（可以传入函数或正则），可以增加任何你想要的自定义datatype类型，有两种扩展方式，具体请参考demo页；

4，形如 *6-16 的自定义范围，如内置datatype类型中有 “*6-16” 表示6-16位任意字符，你可以任意更改数字的范围，如这时你指定datatype为“*2-12”将表示2-12位任意字符。这个对自定义的datatype也同样有效，如你扩展了“z2-4”表示2-4位的中文字符，那么你可以用“z2-6”来表示2-6位中文字符；

5，tiptype增强，3.0版开始几乎可以实现你想要的任何信息提示效果，具体使用方法请参考demo页。

另外，在这对各位网友热情的反馈表示衷心的感谢！Validform下一版本将会把重点放在外部组件的扩展上，如网友提出的上传文件的检测、datatype为date时弹出日期控件等。