validform 的ajax验证,Validform

#Validform

表单验证

插件核心思想就是把所有的验证条件及验证提示信息绑定到每个表单元素，让验证代码在执行时只是核对表单下各元素的值是否跟绑定的验证条件相符，这样你可以随便添加或者去掉任一表单元素而不必修改验证代码

兼容

IE6

用法

1、引入css

请查看下载文件中的style.css，把里面Validform必须部分复制到你的css中 如下图

2、引入js (jquery 1.4.3 以上版本都可以)

3、给需要验证的表单元素绑定附加属性

默认信息 昵称在5位以上

这里的 Validform_checktip 是放在input框外的信息

4、初始化，就这么简单

$(function(){

//$(".demoform").Validform(); //就这一行代码！;

var demo=$(".demoform").Validform({

tiptype:4 // 显示提示信息

});

})

绑定附加属性说明

要验证格式的元素均需绑定datatype属性，datatype可选值内置有10类，用来指定不同的验证格式。

如果还不能满足您的验证需求，可以传入自定义datatype

可以绑定的附加属性有：

datatype

nullmsg

sucmsg

errormsg

ignore

recheck

tip

altercss

ajaxurl

plugin

datatype

内置基本的datatype类型有

*：检测是否有输入，可以输入任何字符，不留空即可通过验证；

6-16：检测是否为6到16位任意字符；

n：数字类型；

n6-16：6到16位数字；

s：字符串类型；

s6-18：6到18位字符串；

p：验证是否为邮政编码；

m：手机号码格式；

e：email格式；

url：验证字符串是否为网址。

自定义datatype的名称，可以由字母、数字、下划线、中划线和号组成。

支持直接绑定正则：如可用这样写datatype="/\w{3,6}/i"，要求是3到6位的字母，不区分大小写；

支持简单的逻辑运算 ：

如datatype="m | e, *4-18 | /\w{3,6}/i | /^validform.rjboy.cn$/"，

这个表达式的意思是：可以是手机号码；或者是邮箱地址，但字符长度必须在4到18位；或者是3到6位的字母，不区分大小写；或者输入validform.rjboy.cn，区分大小写。这里","分隔相当于逻辑运算里的"&&"； "|"分隔相当于逻辑运算里的"||"；不支持括号运算。

nullmsg

当表单元素值为空时的提示信息，不绑定，默认提示"请填入信息！"。

如：nullmsg="请填写用户名！"

sucmsg

当表单元素通过验证时的提示信息，不绑定，默认提示"通过信息验证！"。

如：sucmsg="用户名还未被使用，可以注册！"

errormsg

输入内容不能通过验证时的提示信息，默认提示"请输入正确信息！"。

如：errormsg="用户名必须是2到4位中文字符！"

ignore

绑定了ignore="ignore"的表单元素，在有输入时，会验证所填数据是否符合datatype所指定数据类型，

没有填写内容时则会忽略对它的验证；

recheck

表单里面经常需要检查两次密码输入是否一致，recheck就是用来指定需要比较的另外一个表单元素。

如：recheck="password1"，那么它就会拿当前元素的值跟该表单下，name为"password1"的元素比较。

tip

表单里经常有些文本框需要默认就显示一个灰色的提示文字，当获得焦点时提示文字消失，失去焦点时提示文字显示。它通常和altercss搭配使用。

如

altercss

它需要和tip属性配合使用，altercss指定的样式名，会在文本框获得焦点时被删除，没有输入内容而失去焦点时重新加上。

ajaxurl

指定ajax实时验证的后台文件的地址。

plugin

指定需要使用的插件。

对于日期、swfupload和密码强度检测这三个插件，绑定了plugin属性即可以初始化对应的插件

如，你要使用日期插件

只需在表单元素上绑定plugin="datepicker"就可以，初始化直接这样：

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

初始化参数说明

$(".demoform").Validform({

btnSubmit:"#btn_sub",

btnReset:".btn_reset",

tiptype:1,

ignoreHidden:false,

dragonfly:false,

tipSweep:true,

label:".label",

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遇到服务端错误时也会执行回调，这时的data是{ status:**, statusText:**, readyState:**, responseText:** }；

//这里执行回调操作;

//注意：如果不是ajax方式提交表单，传入callback，这时data参数是当前表单对象，回调函数会在表单验证全部通过后执行，然后判断是否提交表单，如果callback里明确return false，则表单不会提交，如果return true或没有return，则会提交表单。

}

});

datatype

传入自定义datatype类型，可以是正则，也可以是函数。

datatyp:{

"zh2-4":/^[\u4E00-\u9FA5\uf900-\ufa2d]{2,4}$/,

"phone":function(gets,obj,curform,regxp){

//参数gets是获取到的表单元素值，

//obj为当前表单元素，

//curform为当前验证的表单，

//regxp为内置的一些正则表达式的引用。

//return false表示验证出错，没有return或者return true表示验证通过。

}

}