easyform表单验证
一、easyform：
1、说明：
easyform 是一个jQuery插件，包括easyfrom，easytip，两个部分。
easyform是表单验证插件，支持复杂的表单验证规则，并且使用简单。甚至可以做到1行js搞定全部。
目前支持的控件有：input[text，radio，checkbox]，textarea
2、初始化：
首先记得加载这么几个文件，把他们放在合适的位置：
<link rel="stylesheet" href="../easyform/easyform.css">
<script src="js/jquery-2.1.0.min.js"></script>
<script src="../easyform/easyform.js"></script>
其中，jquery-2.1.0.min.js是jQuery，随便选个流行的版本就行。不要低于1.7。顺序别颠倒，因为easyform依赖于jquery，所以要先加载jquery。
最后，在document的ready里加上。
$("#form").easyform();
3、规则定义
你可以这样定义一个input，并且为它添加一些规则和提示信息。
<input name="uid" type="text" id="uid" data-easyform="length:4 16;char-normal;" data-message="用户名必须为4—16位的英文字母或数字" data-easytip="position:top;">
data-easyform 属性后面可以写上你所需要的规则，用半角的分号连接。语法上有些像css。这个属性不是必须的，你如果什么都不写，那么默认，这个控件的值不能为空，其余无任何规则。
data-message 属性是一个默认的提示信息，如果你连这个都不写，那么遇到错误时，会默认提示“格式错误”。你如果需要一个更好的提示信息，写在这里就可以。
data-easytip 这个属性是easytip的配置属性，可以不写，这样easytip就会按照默认的样式和行为初始化。
4、规则列表
| 规则名称 | 说明 | 类型 | 默认值 | 示例 |
|---|---|---|---|---|
| null | 是否可为空 | 无 | 默认所有值都是必填项 | data-easyform="null;" |
| Email地址 | 无 | 无 | data-easyform="email;" | |
| char-normal | 只能为英文、数字、下划线 | 无 | 无 | data-easyform="char-normal;" |
| char-chinese | 只能为中文、英文、数字、下划线、中文标点符号 | 无 | 无 | data-easyform="char-chinese;" |
| char-english | 只能为英文、数字、下划线、英文标点符号 | 无 | 无 | data-easyform="char-english;" |
| length | 长度限制，可以设置最大值和最小值，如果仅设置了一个值，则长度必须为该长度。宽字符长度为2。 | int | 无 | data-easyform="length:1 10;" data-easyform="length:6;" |
| equal | 是否与某值相等，可以用来判断密码确认。 | string | 无 | data-easyform="equal:#psw1;" |
| ajax | ajax验证，异步。需要通过easyform-ajax事件来返回验证结果。 | string | 无 | data-easyform="ajax:fun(1);" |
| real-time | 实时检查。如果设置实时检查，则对象每次失去焦点时就会验证一次。 | 无 | 无 | data-easyform="real-time;" |
| date | 日期格式 yyyy-mm-dd | 无 | 无 | data-easyform="date;" |
| time | 时间格式 hh:mm:ss | 无 | 无 | data-easyform="time;" |
| datetime | 日期时间格式 yyyy-mm-dd hh:mm:ss | 无 | 无 | data-easyform="datetime;" |
| money | 金额格式，等同于float:10 2 | 无 | 无 | data-easyform="money;" |
| uint | 无符号正整数 , 参数为起始值和最大值 | int | 默认最大值999999999999999 | data-easyform="uint:1 100;" |
| number | 数字字符串，只能是数字，不含小数点 | 无 | 无 | data-easyform="number;" |
| float | 浮点数 | int | 无 | data-easyform="float:7 2;" |
| regex | 自定义正则表达式 | string | 无 | data-easyform="^(\\d{4})-(\\d{2})-(\\d{2})$;" |
5、属性
easyform的属性可以在html里或者js中配置，两种方式选择一种即可。
| 选项 | 说明 | 可选值 | 默认值 | js示例 | html示例 |
|---|---|---|---|---|---|
| easytip | 是否显示easytip | true/false | true | $("#form").easyform({easytip:true}); | data-easyform="easytip:false;" |
6、事件
| 事件 | 说明 | 参数 | 示例 |
|---|---|---|---|
| success | 成功事件，所有规则成功后，触发该事件。该事件的触发在提交之前。 | easyform | var ef = $('#demo-form').easyform(); ef.success = function(ef){ ... } |
| error | 错误事件，每一个发生错误的控件都会触发该事件。一次验证，所有规则都会执行，一个控件上可能同时触发多个error事件。 | easyform, input, rule | var ef = $('#demo-form').easyform(); ef.error = function(ef, i, r){ ... } |
| per_validation | 预验证事件，在所有验证规则之前执行。该事件的响应函数如果返回false，则会打断提交。 | easyform | var ef = $('#demo-form').easyform(); ef.per_validation = function(ef){ ... } |
7、ajax
在任意input的data-easyform属性中，添加ajax:fun(a,b,c);就可以定义一个ajax验证规则。其中ajax是固定的，fun是函数名称，任意一个函数都可以，当然函数里即使没执行ajax也无所谓。函数的参数也是完全自定义的，没有任何硬性要求。
唯一需要注意的是，ajax规则通过在input上添加easyform-ajax事件来监听验证结果，所以需要你在你的自定义函数中返回easyform-ajax事件，就像这样：
$("#uid").trigger("easyinput-ajax", false);
true/false代表验证的成功或失败。
8、正则表达式
有些时候，你需要定义自己的规则，所以我添加了一个regex规则，这个规则用于执行你自定义的正则表达式。
data-easyform="^(\\d{4})-(\\d{2})-(\\d{2})$;"
类似这样的定义即可。需要注意的是\\需要写两次，因为会被转意，而开头和结尾的/不要写进去。
9、message
data-message属性可以定义一个提示信息，例如“出错啦！”，但有时候仅仅这样是不够的，我们想按照不同的错误给出不同的提示信息，这样才能提供更好的用户体验！
于是，我们可以这样定义 data-message-length 或者 data-messgae-ajax，在不同情况，定义不一样的提示。data-message-规则名称 就可以根据规则定义不同的提示。当然，你不必为每一个规则都定义一句话，那样太傻了，所以默认的data-message将为每一个没有特例的规则提供默认的信息。
最后，你其实也可以不定义任何message，默认会有那么一句话——“格式错误”。
二、easytips
1、说明
easytip虽然被用于easyform，但其实easytip是可以独立作为一个tooltip插件使用的。
从上面的例子也可以看到，easytip的外观是可以定制的。而且很简单。我内置了几套样式，你也可以写新的。
easytip使用起来也很简单。
var tip=$("#uid").easytip();
tip.show("Hello!");
注意，easytip的z-index是9000。
2、配置
所有这些配置都可以像data-easyform属性一样，写在data-easytip属性里，也和easyform一样，js配置或者html配置写一个即可。
| 项目 | 说明 | 可选值 | 默认值 | 示例 |
|---|---|---|---|---|
| position | tip出现的位置 | top, left, bottom, right | right | $("#uid").easytip({position:top}); data-easytip="position:top;" |
| left | tip出现的位置的X轴偏移量，不要加px这类的单位。 | int | 0 | $("#uid").easytip({left:100}); data-easytip="left:100;" |
| top | tip出现的位置的Y轴偏移量，不要加px这类的单位。 | int | 0 | $("#uid").easytip({top:100}); data-easytip="top:100;" |
| disappear | tip消失的方式。 | self：点击自己, other：点击其他, lost-focus：失去焦点, none：永不消失, N：N毫秒后消失 | other | $("#uid").easytip({disappear:other}); $("#uid").easytip({disappear:100}); data-easytip="disappear:100;" |
| speed | 出现和消失的动画速度。 | 和jquery的fadeIn函数一致 | fast | $("#uid").easytip({speed:"normal"}); data-easytip="speed:200;" |
| class | 样式。easyform.css里有几个默认的样式定义。 | string | easy-white | $("#uid").easytip({class:"easy-red"}); data-easytip="class:easy-red;" |
3、方法
| 方法 | 说明 | 参数 | 返回值 |
|---|---|---|---|
| show(msg) | 显示tip。 | msg：string，要显示的消息。 | 无 |
| close | 关闭提示信息 | 无 | 无 |
4、事件
| 事件 | 说明 | 参数 | 示例 |
|---|---|---|---|
| onshow | 显示事件，开始显示的第一件事就是执行该事件。 | parent, tip | $("#uid").easytip({onshow:function(parent, tip){ ... }); |
| onclose | 隐藏事件，tip从显示状态切换成不显示时触发该事件。 | parent, tip | $("#uid").easytip({onclose:function(parent, tip){ ... }); |
参考：http://www.html580.com/?nv29G0m2