easyform表单验证

范俊逸
2023-12-01

一、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 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
 类似资料: