使用说明

你没看错，就一行代码搞定整站的表单验证！

1

$(".demoform").Validform();

效果图：

使用方法：

$(".demoform").Validform({//所有可传入的参数如下：;btnSubmit:"#btn_sub", btnReset:".btn_reset",tiptype:1, ignoreHidden:false,dragonfly:false,tipSweep:true,showAllError:false,postonce:true,ajaxPost:true,datatype:{"*6-20": /^[^\s]{6,20}$/,"z2-4" : /^[\u4E00-\u9FA5\uf900-\ufa2d]{2,4}$/,"username":function(gets,obj,curform,regxp){//参数gets是获取到的表单元素值，obj为当前表单元素，curform为当前验证的表单，regxp为内置的一些正则表达式的引用;var reg1=/^[\w\.]{4,16}$/,reg2=/^[\u4E00-\u9FA5\uf900-\ufa2d]{2,8}$/;if(reg1.test(gets)){return true;}if(reg2.test(gets)){return true;}return false;//注意return可以返回true 或 false 或 字符串文字，true表示验证通过，返回字符串表示验证失败，字符串作为错误提示显示，返回false则用errmsg或默认的错误提示;},"phone":function(){// 5.0 版本之后，要实现二选一的验证效果，datatype 的名称 不 需要以 "option_" 开头;	}},usePlugin:{swfupload:{},datepicker:{},passwordstrength:{},jqtransform:{selector:"select,input"}},beforeCheck:function(curform){//在表单提交执行验证之前执行的函数，curform参数是当前表单对象。//这里明确return false的话将不会继续执行验证操作;	},beforeSubmit:function(curform){//在验证成功后，表单提交前执行的函数，curform参数是当前表单对象。//这里明确return false的话表单将不会提交;	},callback:function(data){//返回数据data是json格式，{"info":"demo info","status":"y"}//info: 输出提示信息;//status: 返回提交数据的状态,是否提交成功。如可以用"y"表示提交成功，"n"表示提交失败，在ajax_post.php文件返回数据里自定字符，主要用在callback函数里根据该值执行相应的回调操作;//你也可以在ajax_post.php文件返回更多信息在这里获取，进行相应操作；//这里执行回调操作;//注意：如果不是ajax方式提交表单，传入callback，这时data参数是当前表单对象，回调函数会在表单验证全部通过后执行，然后判断是否提交表单，如果callback里明确return false，则表单不会提交，如果return true或没有return，则会提交表单。}
});Validform对象的方法和属性：
tipmsg：自定义提示信息，通过修改Validform对象的这个属性值来让同一个页面的不同表单使用不同的提示文字；
dataType：获取内置的一些正则；
eq(n)：获取Validform对象的第n个元素;
ajaxPost(flag,sync)：以ajax方式提交表单。flag为true时，跳过验证直接提交，sync为true时将以同步的方式进行ajax提交；
abort()：终止ajax的提交；
submitForm(flag)：以参数里设置的方式提交表单，flag为true时，跳过验证直接提交；
resetForm()：重置表单；
resetStatus()：重置表单的提交状态。传入了postonce参数的话，表单成功提交后状态会设置为"posted"，重置提交状态可以让表单继续可以提交；
getStatus()：获取表单的提交状态，normal：未提交，posting：正在提交，posted：已成功提交过；
setStatus(status)：设置表单的提交状态，可以设置normal，posting，posted三种状态，不传参则设置状态为posting，这个状态表单可以验证，但不能提交；
ignore(selector)：忽略对所选择对象的验证；
unignore(selector)：将ignore方法所忽略验证的对象重新获取验证效果；
addRule(rule)：可以通过Validform对象的这个方法来给表单元素绑定验证规则；

• 必须是表单对象执行Validform方法，示例中“.demoform”就是绑定在form元素上的class名称；
• btnSubmit：指定表单下的哪一个按钮触发表单提交事件，如果表单下有submit按钮可以省略。示例中“.btn_sub”是该表单下要绑定点击提交表单事件的按钮，程序会在btnSubmit所在表单下查找该对象；
• btnReset:”.btn_reset”,//可选项 .btn_reset是该表单下要绑定点击重置表单事件的按钮;
• tiptype:1, //可选项 1=>pop box,2=>side tip，默认为1，也可以传入一个function函数，自定义提示信息的显示方式（可以实现你想要的任何效果，具体参见demo页）;
• ignoreHidden:false,//可选项 true | false 默认为false，当为true时对:hidden的表单元素将不做验证;
• dragonfly:false,//可选项 true | false 默认false，当为true时，值为空时不做验证；
• tipSweep：可选项 true | false ，为true时提示信息将只会在表单提交时触发显示，各表单元素blur时不会被触发显示；
• showAllError：可选项 true | false，true：提交表单时所有错误提示信息都会显示，false：一碰到验证不通过的就停止检测后面的元素，只显示该元素的错误信息；
• postonce：指定是否开启网速慢时的二次提交防御，true开启，不指定则默认关闭；
• ajaxPost：使用ajax方式提交表单数据，可选值 true | false，默认false，将提交到action中指定的地址；
• datatype：传入自定义datatype类型，可以是正则，也可以是函数（函数内会传入一个参数），具体使用方法请参考demo页；
• usePlugin：目前已整合swfupload、datepicker、passwordstrength和jqtransform四个插件，在这里传入这些插件使用时需要传入的参数。datepicker在Validform内调用时另外扩展了几个比较实用的参数，具体请参考demo页；
• beforeCheck：在表单提交执行验证之前执行的函数，data参数获取到的是当前表单对象。
• beforeSubmit：在表单验证通过，提交表单数据之前执行的函数，data参数是当前表单对象。
• callback：在使用ajax提交表单数据时，数据提交后的回调函数。返回数据data是Json格式，{“info”:”demo info”,”status”:”y”}，info: 输出提示信息，status: 返回提交数据的状态,是否提交成功，”y”表示提交成功，”n”表示提交失败，在ajax_post.php文件返回数据里自定字符，主要用在callback函数里根据该值执行相应的回调操作。你也可以在ajax_post.php文件返回更多信息在这里获取，进行相应操作；如果不是ajax方式提交表单，传入callback，这时data参数是当前表单对象，回调函数会在表单验证全部通过后执行，然后判断是否提交表单，如果callback里明确return false，则表单不会提交，如果return true或没有return，则会提交表单。

怎样给表单元素绑定验证类型？
示例代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!--ajax实时验证用户名-->
<input type="text" value="" name="name" datatype="s5-16" ajaxurl="valid.php" nullmsg="请输入用户名！" errormsg="昵称至少5个字符,最多16个字符！" /><!--密码-->
<input type="password" value="" name="userpassword" datatype="*6-15" errormsg="密码范围在6~15位之间,不能使用空格！" />
<!--确认密码-->
<input type="password" value="" name="userpassword2" datatype="*" recheck="userpassword" errormsg="您两次输入的账号密码不一致！" /><!--默认提示文字-->
<textarea tip="请在这里输入您的意见。" errormsg="很感谢您花费宝贵时间给我们提供反馈，请填写有效内容！"  datatype="s" altercss="gray" class="gray" name="msg" value="">请在这里输入您的意见。</textarea><!--使用swfupload插件-->
<input type="text" plugin="swfupload" class="inputxt" disabled="disabled" value="">
<input type="hidden" value="" pluginhidden="swfupload"><!--使用passwordStrength插件-->
<input type="password" errormsg="密码至少6个字符,最多18个字符！" datatype="*6-18" plugin="passwordStrength" class="inputxt" name="password" value="">
<div class="passwordStrength" style="display:none;"><b>密码强度：</b> <span>弱</span><span>中</span><span class="last">强</span></div><!--使用DatePicker插件-->
<input type="text" plugin="datepicker" class="inputxt" name="birthday" value="">

说明：
凡要验证格式的元素均需添加datatype属性，datatype可选值内置有10类，用来指定不同的验证格式【如果还不能满足您的验证需求，可以传入自定义datatype，自定义datatype是一个非常强大的功能，有了这个基本可以实现你需要的任何验证需求，具体请参考demo页】。

datatype：* | *6-16 | n | n6-16 | s | s6-18 | p | m | e | url
*：检测是否有输入，可以输入任何字符，不留空即可通过验证；
*6-16：检测是否为6到16位任意字符；
n：数字类型；
n6-16：6到16位数字；
s：字符串类型；
s6-18：6到18位字符串；
p：验证是否为邮政编码；
m：手机号码格式；
e：email格式；
url：验证字符串是否为网址。
注意radio，checkbox，select这三类datatype从5.0版本开始删除，可以给这三类表单元素绑定其他任何内置或自定义的datatype。radio和checkbox元素只需给该组的第一个元素绑定datatype属性即可。

其他的附加属性：

• nullmsg：是指定没有填入内容时出现的提示信息，不指定默认是“请填入信息！”，另外当datatype为radio、checkbox或select时，因为这三种类型只要为空值就表示出错，提示errormsg所指定信息，所以这三类不需要绑定该属性；
• errormsg：是指定验证格式不符时出现的提示信息，不指定默认是“请输入正确信息！”；
• ignore：绑定ignore=”ignore”的表单元素，当有输入时会验证所填数据是否符合datatype所指定数据类型（格式不对不能通过验证），当没有输入数据时也可以通过验证；
• recheck：是用来指定两个表单元素值一致性检测的另外一个对象，赋给它另外一个对象的name属性值即可；
• tip：是指定表单元素的提示信息;指定后该元素会有focus时提示信息消去，没有输入内容blur时出现提示信息的效果，请参看demo页的“备注”效果；
• altercss：是指定有tip属性的元素默认提示文字显示时的样式，当该元素focus时程序会把这个样式去掉，blur时如果值为空或者跟提示文字一样则再加上该样式；
• ajaxurl：指定ajax实时验证的后台文件路径，给需要后台数据库验证信息的对象绑定该属性。注意该文件输出的内容就是前台显示的验证出错的反馈信息，如果验证通过请输出小写字母”y”。后台页面如valid.php文件中可以用 $_POST["param"] 接收到值，Ajax中会POST过来变量param；
• plugin：指定需要使用的插件。