Validator又一个表单验证,原生JS

之前写过一个jquery的表单验证,用jquery做这个验证比较多余。正好项目有用,封装了个原生的js表单验证,名字很纯粹就叫Validator

Demo:http://liutian1937.github.io/Validator/v4/

功能点:

  1. 原生js,不依赖任何库
  2. 动态添加验证规则
  3. 设置是否实时报错
  4. 错误提示的样式,单条显示还是合并显示,以及函数形式
  5. 遇到错误是否停止接下来的验证
  6. 常用验证,邮箱,字符串,手机,以及两个字段进行比较的验证,支持自定义正则
  7. 单条验证规则失败后的提示信息,支持字符串或者函数

使用说明:

var F = Validator('form表单name值',{
        together : false, //默认遇错误打断,显示单条错误信息,默认为false(只显示一条)
        errShow : 'alert', //错误提示,默认为alert,支持字符串(alert,single,multiple),自定义function(string || array())
        errBox : 'error_strings', //错误消息class,默认为form表单中的 .error_strings
        errPar : 'li', //单个表单元素的父级元素,用于定位错误的位置 li > (span > input ) ~ span.error_strings
        timely : false //实时判断,是否失去焦点以及change判断
});

//添加验证规则,传参为二位数组

F.addRule([
    ["username","required",'姓名不能为空'],
    ["username","regex=/^[A-Za-z]+$/",'只能是a-z'],
    ["username","minlength=3",'姓名必须大于3个字符'],
    ["username","maxlength=10",'姓名必须小于10个字符'],
    ["email","required",'邮箱必填'],
    ["email","email",'邮箱格式']
]);

其中第三个参数可以是function,比如

F.addRule([
    ["username","required",function(){ alert('姓名不能为空') }],
    .....
]);

全局的报错也支持function(接收参数为错误的数组),

errShow : function(data){
    var wrongList = document.getElementById('wrongList'), html = [];
    wrongList.innerHTML = '';
    for(var i =0; i '+data[i].msg+'');
    }
    wrongList.innerHTML = html.join('');
}

API

regex : 正则, (regex=/^[A-Za-z]+$/ ) 
required : 必填内容,针对input,textarea 
minlength : 最小字符长度 (minlength=3)
maxlength : 最大字符长度 (maxlength=10)
number : 数字
alpha : 字母(大小写都可)
string : 字母,数字,下划线
email : 邮件格式
telphone : 电话
mobile : 手机
greaterthan : 大于某个值,或者某个input中的值 (greaterthan=5 或者 greaterthan=字段名 )
lessthan : 小于某个值,用法同上
equal : 等于某个值,或者数组(数组以|分隔)中的某个值,或者字段 (equal=66 或者 equal=字段名 或者 equal='aa|bb|cc' )
unequal : 不等于某个值,用法同上

notselect :不能选择的值,指的是select中option的value,或者 radio/checkbox数组中某一个的value (notselect=字符串或者数字或者数组)
shouldselect : 必须选中,用法同上

minselect : 最少选中几项
maxselect : 最多选择几项

Github:https://github.com/liutian1937/Validator

Demo:http://liutian1937.github.io/Validator/v3/

根据优酷土豆页面地址,获取swf播放器地址(php)

项目用到临时写的。待完善

/*
     * 根据用户提交的(swf/html)地址,获取优酷,土豆的swf播放地址
     * */
    private function _getSwf ($url = '') {
        if(isset($url) && !empty($url)){
            preg_match_all('/http:\/\/(.*?)?\.(.*?)?\.com\/(.*)/',$url,$types);
        }else{
            return false;
        }
        $type = $types[2][0];
        $domain = $types[1][0];
        $isswf = strpos($types[3][0], 'v.swf') === false ? false : true;
        $method = substr($types[3][0],0,1);

        switch ($type){
            case 'youku' :
                if( $domain == 'player' ) {
                    $swf = $url;
                }else if( $domain == 'v' ) {
                    preg_match_all('/http:\/\/v\.youku\.com\/v_show\/id_(.*)?\.html/',$url,$url_array);
                    $swf = 'http://player.youku.com/player.php/sid/'.str_replace('/','',$url_array[1][0]).'/v.swf';
                }else{
                    $swf = $url;
                }
                break;
            case 'tudou' :
                if($isswf){
                    $swf = $url;
                }else{
                    $method = $method == 'p' ? 'v' : $method ;
                    preg_match_all('/http:\/\/www.tudou\.com\/(.*)?\/(.*)?/',$url,$url_array);
                    $str_arr = explode('/',$url_array[1][0]);
                    $count = count($str_arr);
                    if($count == 1) {
                        $id = explode('.',$url_array[2][0])[0];
                    }else if($count == 2){
                        $id = $str_arr[1];
                    }else if($count == 3){
                        $id = $str_arr[2];
                    }
                    $swf = 'http://www.tudou.com/'.$method.'/'.$id.'/v.swf';
                }
                break;
            default :
                $swf = $url;
                break;
        }
        return $swf;
    }

Jwalk – JavaScript Animation Library (V1.0)

事情太多,断断续续折腾了好几个晚上,终于写完了这个动画库。Jwalk

简单介绍下:

Jwalk是用来做什么的?

前端开发过程中经常会用到一些动画效果,比如某个div的放大,缩小,左右移动,实现这些效果都是通过Js设置元素的style样式,我们可能会借助Jquery或者其他脚本库提供的动画接口来更容易的实现相关效果。但是如果我们可能只会用到Jquery的动画效果,以及一些简单的选择器,那么(在天朝)加载这个脚本库就显得多余了。为什么在天朝就多余,国内的网络环境与网速是:你懂得!所以为了适应国情,封装了这个Mini版的动画库-Jwalk(名字可轻喷),Min压缩版+Gzip=4K

所以时间单位都为ms,由于脚本计时器是队列执行方式,可能会产生阻塞问题导致时间不准确。所以采用CSS3的动画与采用JS方式上,动画速度与流畅性都会有差别。对低版本浏览器动画效果要求高的话需要对低版本浏览器单独设置动画时间。在Jwalk中为了减小动画速度的差距,我加入了代码:
params.speed = Unit.css3 ? params.speed : parseInt(params.speed/1.5) ;,一个1.5倍的时间差。

动画执行的方式采用Css3/Js Tween算法相结合的方式,对于高级浏览器采用css3执行动画效果,不支持css3的采用缓动函数,默认集成了(linear,ease-in,ease-out,ease-in-out)四种动画效果,如果需要更多效果,可以参考Easing functionsEasing EquationsJavaScript Tween算法及缓动效果

Jwalk未压缩版本有粗糙的注释,大家可以扩展功能后自行压缩,欢迎尽情蹂躏。
时间匆忙,不足之处欢迎给出意见。Email:ok8008@yeah.net

顺便使用下yahoo的前端框架Pure,感觉比起bootstrap来说,轻松很多,也许是pure做的不是很多,但是却能让开发者做更多的原因吧。个人比较喜欢他它的简洁。+++

关于Jwalk的更多介绍:http://liutian1937.github.io/Jwalk/index.html

现在版本1.0,欢迎反馈bug…

仿Reeder页面效果(待完善,欢迎反馈)

访Reeder界面效果

访Reeder界面效果

一直很欣赏触控手势的代码实现,所以最近折腾了个Javascript触控手势库–JTouch,效果还有诸多不完善之处,苦于硬件设备不完善,针对ie10的兼容性一直没有跟上。在版本更新到1.1的时候,又颠覆了自己的好多想法,代码的改动量上比较大。小的改动随时都会出现,所以也就一直在1.1上改来改去。

Github地址:https://github.com/liutian1937/Reeder

Demo地址:http://liutian1937.github.io/Reeder/demo.html

在改动JTouch的同时一直想要拿它去搞个什么东西,某天仔细研究了Reeder的界面效果,马上被其低调的奢华吸引了。所以决定拿JTouch做个Reeder的web版,当然只是界面的Web版…不过话说,我是想写个php的后端来配合这个界面的…

先说说Reeder是什么东西:

《Reeder》是一款评价极高的谷歌阅读器Google Reader软件,获得了2600多个5星评价。软件简约的UI和强大的功能都是其重要特色。首先,它支持与Google Reader云端同步,支持文件夹分类管理,还可以给RSS条目加星或做注释,还支持条目分享,图片缓存,状态保存等等。在其他服务的关联方面,Reeder还支持Instapaper/ReadItLater,还可以发送给Delicious/Pinbard或Twitter。

想法到产品的进化过程(比较水)

想必很多人并不关心这个东西,因为我也是这样,来看这个的人肯定喜欢干货(直白的代码更有说服力)。但是我感觉说点这个还是有必要的,本人水平有限,扯淡也一般,所以扯点白话大家就凑合着看一下。首先个人是比较倾向于表现类的开发的,因为当你看到你写出来的东西实现了某个效果的时候是比较有成就感的。对于开发表现类的东西,我总结了个人的一些见解:

  1. 你要清楚有哪些交互过程,有哪些动画,有哪里是需要用到数据交互的。
  2. 根据你的理解将这些东西进行分块,最好越详细越好,然后将这个块再组合起来,看哪些地方是通用的可以用公共的函数,哪些地方是需要单独封装的等等。(我一般会在纸上画这些东西)
  3. 这步比较轻松,躺在床上想就行了,至少我喜欢这样。看完第二部的模块之后,我并不会着手写代码,而是会花点时间想,当然经常睡着…
  4. 入手写demo,由于每个人水平不同,但是我们的目的是相同的,这一步要求个人根据自己水平写demo,不管用不用模块,用不用封装,不计较代码效率的也要写出表现效果来。(当然别写的你自己都不认识了)
  5. 写好demo,重新审查自己的代码,进行优化,简化,封装等等
  6. 在感觉自己把第5步做的还算ok了,去google搜索类似的小模块,参考别人的代码,然后完善自己的demo…

代码中用到了哪些东西(部分要点)

  1. 手势事件,我用的自己的JTouch库,貌似是多余了一点,因为手势并不多。失败之处,造成耦合。
  2. Font Icon,文字小图标,支持将代码转换成小图标,我用的 IconMoon的文字库,http://icomoon.io/app/(需要现代浏览器支持)
  3. translate实现的动画效果,以及各种高度,宽度,滚动距离的判断,其中的算法给我折腾的很迷糊
  4. 兼容性与初始化的问题
  5. 异步加载数据,与监听图片完全载入
  6. JTouch鼠标触控手势库,JNav实现的是左侧一直停留在顶部的导航,JScroll是支持手势操作的容器(放出的接口比较乱,请静待注释),Common是一些公共函数

实现的效果

  • 内容与导航部分支持触控手势与鼠标手势
  • 左侧导航跟随并滚动到底部静止
  • 左侧控制选择前一篇后一篇
  • 横向拖拽标题导航可以实现简单数据交互
  • 右侧拖拽到顶部或者底部异步加载数据

不足之处

  • 多浏览器兼容性方面
  • 性能消耗
  • 图片完全载入的监测
  • 耦合性

Js事件监听封装(支持匿名函数)

关于js中的事件监听大家用的比较多了,无非是判断浏览器是否支持addEventListener和attachEvent,网上搜索关于事件监听的方法也挺多,但是总有些不是很完善。下面的方法中对于添加事件监听的方法是一样的,只不过在取消事件绑定上面做了点手术,现在可以支持匿名函数的使用,所以在绑定事件的时候不再需要给函数单独命名了。

先看demo:http://liutian1937.github.io/demo/EventListen.html

主要代码:

/*绑定事件与取消绑定*/
var handleHash = {};
var bind = (function() {
	if (window.addEventListener) {
		return function(el, type, fn, capture) {
			el.addEventListener(type, function(){
				fn();
				handleHash[type] = handleHash[type] || [];
				handleHash[type].push(arguments.callee);
			}, capture);
		};
	} else if (window.attachEvent) {
		return function(el, type, fn, capture) {
			el.attachEvent("on" + type, function(){
				fn();
				handleHash[type] = handleHash[type] || [];
				handleHash[type].push(arguments.callee);
			});
		};
	}
})();
var unbind = (function(){
	if (window.addEventListener) {
		return function(el, type ) {
			if(handleHash[type]){
				var i = 0, len = handleHash[type].length;
				for (i; i<len ; i += 1){
					el.removeEventListener(type, handleHash[type][i]);
				}
			};
		};
	} else if (window.attachEvent) {
		return function(el, type) {
			if(handleHash[type]){
				var i = 0, len = handleHash[type].length;
				for (i; i<len ; i += 1){
					el.detachEvent("on" + type, handleHash[type][i]);
				}
			};
		};
	}
})();

原理解析:

handleHash做哈希表缓存事件的function,handleHash[‘事件名称’]是一个数组,来添加多个事件监听的方法,unbind哪个事件的时候遍历handleHash[‘事件名称’]的数组,然后移除。

使用:

bind(obj,'click',function(){
	alert ('click');
});
unbind(obj,'click');

Javascript触屏手势库-JTouch(更新V1.1)

Javascript触屏手势库-jTouch

Javascript触屏手势库-jTouch

触屏手势库–JTouch

封装的代码有不足支出,以及bug等欢迎大家多多指正。

Github地址:https://github.com/liutian1937/JTouch (大家可以fork项目跟踪最新进展)

JTouch的介绍

JTouch是针对触屏浏览器提供的一个手势集合,由于我的测试环境主要是ipad,所以对于其他触屏设备的支持情况可能会有所不足。这个在后期版本升级过程中会修复。

JTouch在手指移动上去会触发start事件,结束会触发end事件。主要支持的手势有tap(单击),doubletap(双击),longtap(长按),hold(拖拽),swipe(滑动),flick(轻拂),pinch(捏合,拉伸),rotate(旋转);除了pinch,rotate手势外,其他手势事件的回调函数都会返回data[‘fingerNum’]值,所以在回调函数中可以根据手指的数量来拼合其他的事件。

其中每个手势事件都会返回响应的回调函数,接受回调函数的参数值一般定义为evt和data,可自行设定。

  • 其中swipe和flip可以返回方向data[‘direction’]以及左右,上下移动的距离data[‘x’],data[‘y’],swipe事件结束会返回状态值data[‘status’] ==  end;
  • pinch会返回type信息,即in和out,来判断向里还是向外压缩或者拉伸;返回data[‘scale’]表示缩放比例;
  • rotate同样会有direction信息来简单判断向左旋转亦或向右旋转,同时返回data[‘rotation’]作为角度信息;
  • 每个手势事件都有相应的event对象返回,其中pinch和rotate返回的与其他的event对象是不同的,这两个返回的是gesturechange的事件对象,(详细信息可以在debug模式下调试查看)

jTouch的使用

  1. 实例化
    var objTouch = document.getElementById(‘touch’);
    var Touches = JTouch(objTouch);
  2. 采用链式写法,

    Touches.on(‘手势名称’,function(evt,data){
    //回调函数部分
    })

  3. 回调函数中返回相应的值

JTouch的示例

http://liutian1937.github.io/JTouch/carousel.html

触摸平滑移动,其中用到了单独封装的translate插件,时间有限代码略显粗糙,各位看官见谅。

http://liutian1937.github.io/JTouch/touch.html

稍微仿了下ipad的界面效果,有太多不足支持。长按可以触发icon抖动,双击空白取消效果,但是取消效果过程会产生抖动,希望哪位高人提点意见。其中想到了用-webkit-animation-play-state:paused;来实现,但是具体如何让动画停在第一帧不甚了解。

另外做了个简单的图像效果,这个效果的flick效果还没有强化,关于这个效果我感觉我实现的复杂了一些,但是暂时没有想到万全之策,所以里面出现了不少的参数,哪位高人见到可以优化之。大家可以根据这个效果扩展成一个相册效果。具有左右翻的效果。


更新记录:

v1.1更新记录:

命名jTouch -> JTouch
实例化不需要new,直接JTouch
加入鼠标手势操作,鼠标可以实现tap.doubletap,swipe,hold,flip操作,可以用mousewheel模拟pinch
加入init(),destory()功能来实现重置和销毁
不足:手头没有win8的平板,暂时没有实现ie10的触控手势

Follow,原生javascript跟随滚动条插件

项目需求,封装js跟随滚动条插件,

github地址:https://github.com/liutian1937/Follow

Demo:http://liutian1937.github.io/Follow/

Follow
======

Demo : http://liutian1937.github.io/Follow/

Javascript Follow Plugin

Js 跟随滚动效果插件

支持定义多个跟随ID,采用css fixed属性,不支持ie6,兼容其他主流浏览器。

支持定义滚动到底部的最小高度,不会覆盖底部

页面大小resize后,插件会自动重置参数

=======
Js 跟随滚动效果插件

  1. 支持定义多个跟随ID,采用css fixed属性,不支持ie6,兼容其他主流浏览器。
  2. 支持定义滚动到底部的最小高度,不会覆盖底部
  3. 页面大小resize后,插件会自动重置参数

=======

使用方法

<script type="text/javascript" src="follow.js"></script>

window.onload = function(){
	var followIds = [document.getElementById("follow"),document.getElementById("follow2")];
	new Follow({
		obj:followIds,
		bottom:150
	});
}

HoverDir响应鼠标移动方向的悬停效果插件

Jquery.hoverDir响应鼠标移动方向的悬停效果插件

Jquery.hoverDir响应鼠标移动方向的悬停效果插件

之前的一篇文章JS判断从哪个方向判断进入一个容器中提到了一个效果,通过计算鼠标位置以及一些数学方法,来判断鼠标是从哪个方向进入以及离开该容器的。今天我这里搜索到一个不错的实战效果,分享给大家。是基于jquery的一个插件。该效果出品人是老外,原文地址

该效果用到的几点技术,一个是css3的动画效果,这里不是采用的js的动画效果,所以兼容性存在不足。另外就是之前提到的针对进入方向的判断。

效果演示地址:http://www.niumowang.org/demo/hoverDir/

 代码构成,HTML标签部分

<ul id="da-thumbs" class="da-thumbs">
    <li>
        <a href="http://dribbble.com/shots/502538-Natalie-Justin-Cleaning">
            <img src="images/7.jpg" />
            <div><span>Natalie & Justin Cleaning by Justin Younger</span></div>
        </a>
    </li>
    <li>
        <!-- ... -->
    </li>
    <!-- ... -->
</ul>

运行代码复制代码另存代码(提示:可以编辑后运行)

 代码构成,CSS部分

.da-thumbs li {
    float: left;
    margin: 5px;
    background: #fff;
    padding: 8px;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.da-thumbs li a,
.da-thumbs li a img {
    display: block;
    position: relative;
}
.da-thumbs li a {
    overflow: hidden;
}
.da-thumbs li a div {
    position: absolute;
    background: rgba(75,75,75,0.7);
    width: 100%;
    height: 100%;
}

运行代码复制代码另存代码(提示:可以编辑后运行)

需要注意的是隐藏的div是决定定位的,所以他的父元素就要采用relative相对定位。

CSS动画关键部分,采用css3的动画效果,以及添加方向的class

.da-thumbs li a div.da-animate {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
/* 动画开始阶段的class */
.da-slideFromTop {
    left: 0px;
    top: -100%;
}
.da-slideFromBottom {
    left: 0px;
    top: 100%;
}
.da-slideFromLeft {
    top: 0px; 
    left: -100%;
}
.da-slideFromRight {
    top: 0px;
    left: 100%;
}
/* 动画结果阶段的class: */
.da-slideTop {
    top: 0px;
}
.da-slideLeft {
    left: 0px;
}

运行代码复制代码另存代码(提示:可以编辑后运行)

动画的js脚本部分

脚本部分,就是引入jquery文件,引入该插件。然后调用该插件即可。

$(function() {
$(‘#da-thumbs > li’).hoverdir();
});
该插件支持动画效果,延迟动画效果,和反向
$(‘#da-thumbs > li’).hoverdir( {
hoverDelay : 50,
reverse : true
});
hoverDelay是延迟加载时间,越大时间越长。reverse是是否反向,true表示反向,默认false

效果演示地址:http://www.niumowang.org/demo/hoverDir/