一劳永逸的表单验证—更新

浏览:2271 发布日期:2013/08/28 分类:前端开发 关键字: 表单验证
表单验证更新:
详情请点击http://121.199.5.194/flysword

完善了,再来分享!
先上图~ 一直觉得表单验证很麻烦,现在可再也不需重复写代码咯!



更新
添加way、blur、submit函数

更新
修改一些bug
一、添加规则函数:ty.form.rule('选择器','规则','提示信息');
1、选择器以逗号隔开
2、规则写法'rule1|rule2|rule3(v1,v2,...)|rule4',其中rule1、rule2、rule4为正则对象对应的键名,rule3(v1,v2,...)表示函数,提供自带常用如eq、post、get等函数,也可以是自定义函数,同时支持String.prototype.eq()这种形式的函数。
3、选择器和规则为多对多关系。
4、提示信息写法 '提示1|提示2|提示3|...',提示信息可以为空(为空时表示使用switch(){}里已定义好的提示),但要求和“规则”是一对一关系。

二、3个触发验证函数ty.form.check()、ty.form.submit()、ty.form.blur();实际上只有一ty.form.check()验证函数。其它2个为了使用方便,添加的函数。
1、ty.form.submit('表单选择器'),参数可写可不写,自动检测分组。该函数表示,表单提交时触发的函数。
2、ty.form.blur('选择器'),参数有无均可,表示输入域失去焦点时,仅针对该输入域触发验证。
3、ty.form.check(),这个才是真正的验证函数,但有时需要这样if(ty.form.check()){}使用,一般使用submit()和blur()即可。
三、ty.form.way('alert或single或为空','divId或为空');表示使用何种提示方式提示。

四、重点来了,各函数组合使用,达到不同的输入域、不同的验证规则,不同的提示方式提示。
如:
1、ty.form.rule('id1,id2,id3','notempty','非空').way('alert').blur();
ty.form.rule('id1','email','邮箱格式不正确');
表示:id1、2、3输入域为空失去焦点时会触发验证,以alert方式提示“非空“,注意其中针对id1有2条规则,而第二条规则因为没有blur()函数,因此只会提交表单时触发。并会在文本域后显示”邮箱格式不正确“

达到的效果是,对于同一个输入域,可以根据不同的规则以不同的提示方式提示

五、提供post、get、ajax等验证如”账号是否被使用“等函数,如上图中,只需在规则添加post(url)即可

对提示方式和blur触发,也可以统一设置,如下:
ty.form.way('single','div').blur().submit()
此时way和blur会覆盖前面的设置。

继续完善.... 后续添加focus时的提示和def提示函数.... 最后css显示控制
最佳答案
评论( 相关
后面还有条评论,点击查看>>