Easyform
download v1.3.4 github
用户名
密码
确认密码
email
昵称

简介

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

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

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

easyform

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就会按照默认的样式和行为初始化。

规则名称 说明 类型 默认值 示例
null 是否可为空 无 默认所有值都是必填项 data-easyform="null;"
email 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="regex:^(\\d{4})-(\\d{2})-(\\d{2})$;"

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

选项 说明 可选值 默认值 js示例 html示例
easytip 是否显示easytip true/false true $("#form").easyform({easytip:true}); data-easyform="easytip:false;"
is_submit 是否执行提交，该值为false时，将不执行提交。 true/false true ef = $("#form").easyform(); ef.is_submit = false; 不能在HTML中赋值
方法 说明 参数 示例
submit 提交表单 @submit bool 是否提交表单，如果为false，则只验证，不提交。 var ef = $('#demo-form').easyform();
ef.submit(true);
check 检查表单的部分内容 @iterator string 用来定义检查哪些控件。
@callback function 回调函数，这个函数只有一个参数。		 var ef = $('#demo-form').easyform();
ef.check("input[type=text]", function(bool){ ...... });
show 显示自定义消息 @iterator string 选择器，用来指定为哪些控件自定义消息。
@msg string 自定义消息。		 var ef = $('#demo-form').easyform();
ef.show("#uid", "自定义消息");
事件 说明 参数 示例
success 成功事件，所有规则成功后，触发该事件。该事件的触发在提交之前。 easyform var ef = $('#demo-form').easyform();
ef.success = function(ef){ ... }
或者
var ef = $('#demo-form').easyform({
"success":function(ef){...}
});
error 错误事件，每一个发生错误的控件都会触发该事件。一次验证，所有规则都会执行，一个控件上可能同时触发多个error事件。 easyform, input, rule var ef = $('#demo-form').easyform();
ef.error = function(ef, i, r){ ... }
或者
var ef = $('#demo-form').easyform({
"error":function(ef, i, r){...}
});
complete 完成事件，表单完整验证一次后，触发该事件。该事件优先级低于error和success。 easyform var ef = $('#demo-form').easyform();
ef.complete = function(ef){ ... }
或者
var ef = $('#demo-form').easyform({
"complete":function(ef){...}
});
per_validation 预验证事件，在所有验证规则之前执行。该事件的响应函数如果返回false，则会打断提交。 easyform var ef = $('#demo-form').easyform();
ef.per_validation = function(ef){ ... }
或者
var ef = $('#demo-form').easyform({
"per_validation":function(ef){...}
});
easyform-error 控件验证失败事件，与error事件不同，该事件作用于控件本身，当控件发生错误就会立即触发，而不是easyform完全验证后才触发。 e, input, rule $("#uid").on("easyform-error", function (e, input, rule)
{
......
});
easyform-success 控件验证成功事件，与success事件不同，该事件作用于控件本身，当控件验证成功就会立即触发，而不是easyform完全验证后才触发。 e, input, rule $("#uid").on("easyform-success", function (e, input, rule)
{
......
});
easyform-success-rule 控件单个规则验证成功事件，该事件当一个控件的某个规则验证成功后即触发。事件名称为easyform-success-[规则名称]。 e, input $("#uid").on("easyform-success-length", function (e, input)
{
......
});
  • 2016-12-10 修正了一处关于null规则的bug。
  • 2016-6-3 由于前一版本改动过大，导致部分条件下，可能引起表单无法提交，已更正。
  • 2016-5-5 修正了realtime模式下的两个bug，该bug会导致部分条件下表单在错误的时机提交。（感谢群里的小徐同学指出bug）
  • 2016-4-15 新增easyform.show方法。新增3个控件验证事件。
  • 2016-4-13 为easyform.check方法添加了一个回调函数。改正了一处real-time模式下，引起的检测错误。
  • 2016-2-17 easyform的事件支持在初始化的时候配置了。支持表单的部分验证。添加了身份证验证规则。
  • 2015-11-28 修正了一处null规则可能引起表单不能提交的bug。
  • 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="regex:^(\\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

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

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

easytip使用起来也很简单。

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

注意，easytip的z-index是9000。

所有这些配置都可以像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;"
parent easytip的宿主，即easytip指向的对象。 Document Object 无 只读，不可赋值
hover_show 鼠标移动到parent时，是否显示tip，即作为一个tooltip来使用。注意：此属性将与表单验证的相关设置有冲突，所以一旦使用hover_show = "true"。表单验证时，该parent的tip显示将不受easyform控制。 string false $("#uid").easytip({hover_show:"true"});
data-easytip="class:true;"
is_show 是否显示 bool false 只读，不可赋值
方法 说明 参数 返回值
show(msg) 显示tip。 msg：string，要显示的消息。 无
close 关闭提示信息 无 无
事件 说明 参数 示例
onshow 显示事件，开始显示的第一件事就是执行该事件。 parent, tip $("#uid").easytip({onshow:function(parent, tip){ ... });
onclose 隐藏事件，tip从显示状态切换成不显示时触发该事件。 parent, tip $("#uid").easytip({onclose:function(parent, tip){ ... });
easytip例子
easytip例子
easytip例子
easytip例子

十分感谢你的光临，如果有什么问题，可以加QQ群，222578556（Hello PHP），我是群主：大树。