easyform 是一个jQuery插件，包括easyfrom，easytip，两个部分。

easyform是表单验证插件，支持复杂的表单验证规则，并且使用简单。甚至可以做到1行js搞定全部。

目前支持的控件有：input[text，radio，checkbox]，textarea

表单验证，就是这么简单！

首先记得加载这么几个文件，把他们放在合适的位置：

<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();

兼容各种主流浏览器，IE10+，其余各种浏览器都没有问题。包括手机上，不过该控件并不是针对手机设计的，所以并没有针对手机做效率优化和操作上的优化。

顺便提一句，别拿这个页面验证兼容性，这个页面很多细节都是html5的，但这些只是为了好看，和控件本身无关。并且因为样式表的兼容性问题，该页面在IE8下面根本无法工作。

easyform包含两个类，easyform和easyinput。easyinput负责搞定单个对象的规则验证，很显然，easyform负责调用easyinput。

你可以这样定义一个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就会按照默认的样式和行为初始化。

easyform的属性可以在html里或者js中配置，两种方式选择一种即可。

• 2015-10-19 为easyinput类增加了complete事件。修正了在real-time规则下，easytip的状态同步问题。
• 2015-6-10 为easyinput类添加了一个析构函数，用于修正real-time下的重复验证问题，该修正是对前几次针对这个问题的修正的优化处理。
• 2015-6-9 修正了规则计数错误，和real-time属性相关(感谢梦在远方的指正)。
• 2015-6-8 修正了一个和radio、checkbox相关的bug。修正了一个和提交相关的bug。
• 2015-5-24 修改了很多bug，对代码进行了重构。属性定义修改成了html5的标准命名。所以这个版本不兼容过去的老版本。不过无所谓了，你们也找不到老版本。
• 2015-4-10 修正了input没有easyform属性时，不提交表单的bug。
• 2014-11-21 支持ajax异步验证。修正了若干bug。
• 2014-11-18 支持实时检查。支持多条件的提示信息。
• 2014-11-5 第一版完成。

在任意input的data-easyform属性中，添加ajax:fun(a,b,c);就可以定义一个ajax验证规则。其中ajax是固定的，fun是函数名称，任意一个函数都可以，当然函数里即使没执行ajax也无所谓。函数的参数也是完全自定义的，没有任何硬性要求。

唯一需要注意的是，ajax规则通过在input上添加easyform-ajax事件来监听验证结果，所以需要你在你的自定义函数中返回easyform-ajax事件，就像这样：

$("#uid").trigger("easyform-ajax", false);

true/false代表验证的成功或失败。

有些时候，你需要定义自己的规则，所以我添加了一个regex规则，这个规则用于执行你自定义的正则表达式。

data-easyform="^(\\d{4})-(\\d{2})-(\\d{2})$;"

类似这样的定义即可。需要注意的是\\需要写两次，因为会被转意，而开头和结尾的/不要写进去。

data-message属性可以定义一个提示信息，例如“出错啦！”，但有时候仅仅这样是不够的，我们想按照不同的错误给出不同的提示信息，这样才能提供更好的用户体验！

于是，我们可以这样定义 data-message-length 或者 data-messgae-ajax，在不同情况，定义不一样的提示。data-message-规则名称 就可以根据规则定义不同的提示。当然，你不必为每一个规则都定义一句话，那样太傻了，所以默认的data-message将为每一个没有特例的规则提供默认的信息。

最后，你其实也可以不定义任何message，默认会有那么一句话——“格式错误”。

这个插件支持radio和checkbox，但因为这两个控件的特殊性，所以，只有null规则对这两个控件有效，另外，这两个控件都是成组使用的，所以，每组控件只有第一个会被验证，其余的控件，即使定义了data-easyfrom、data-message之类的属性，也会被忽略。

另外，easytip的定位，是基于宿主的位置的。某些更改radio和checkbox外观的插件，会将他们藏起来，用label或其他标签代替，这种情况下，easytip将无法正确显示。

easytip虽然被用于easyform，但其实easytip是可以独立作为一个tooltip插件使用的。

从上面的例子也可以看到，easytip的外观是可以定制的。而且很简单。我内置了几套样式，你也可以写新的。

easytip使用起来也很简单。

var tip=$("#uid").easytip();
tip.show("Hello!");

注意，easytip的z-index是9000。

所有这些配置都可以像data-easyform属性一样，写在data-easytip属性里，也和easyform一样，js配置或者html配置写一个即可。