特效介绍
Validform是一款基于jQuery的js表单验证插件,插件功能非常强大,下面列出了基本功能和进阶功能,还有更多功能,详见:Validform案例。除此之外,它的兼容性也不错,使用方法也很简单,只要起个ID,调用一下即可。
基本功能
智能的提示信息
给表单元素绑定验证类型和提示文字
给表单下的任一对象绑定提交表单或重置方法
修改默认的提示文字,如默认弹出框的标题,验证成功后的提示文字等
检测重复密码是否与第一次输入的密码一致
逐条验证与一次验证显示所有错误信息
使用ajax的方式提交表单
让表单只能提交一次,提交成功后再提交表单将不会有操作
在表单元素有输入时才验证,没有输入时不验证
Validform实现用户名的实时验证
dataype实现规则累加或单选
进阶功能
Validform没有限定只能使用table布局,任何结构都是可以的
传入自定义的datatype,可以满足你几乎所有的验证需求
在自定义datatype中返回具体的错误信息
仅用Validform做验证,验证成功后调用自己的方法提交表单
使用方法
1、引入css请查看下载文件中的style.css,把里面Validform必须部分复制到你的css中(文件里这个注释 "/*==========以下部分是Validform必须的===========*/" 之后的部分是必须的)。之前发现有部分网友把整个style.css都引用在了页面里,然后发现样式冲突了。
2、引入js (jquery 1.4.3 以上版本都可以)
<script type="text/javascript" src="jquery-1.6.2.min.js"></script> <script type="text/javascript" src="Validform_v5.1_min.js"></script>
3、给需要验证的表单元素绑定附加属性
<form class="demoform" > <input type="text" value="" name="name" datatype="s5-16" errormsg="昵称至少5个字符,最多16个字符!" /> </form>
4、初始化,就这么简单
$(".demoform").Validform();
注:
1、Validform有非压缩、压缩和NCR三个版本提供下载,NCR是通用版,当你页面因编码问题,提示文字出现乱码时可以使用这个版本;
2、Validform没有限定必须使用table结构,它可以适用于任何结构,需要在tiptype中定义好位置关系。
更多使用方法参见:Validform v5.3.2 文档