jQuery 表单验证插件——Validation(基础)
(2011-04-23 15:10:21)
标签： 杂谈 | 分类： javascript |
Validation插件式历史悠久的jQuery插件之一,经过了全球各种项目的验证,得到了很多WEB开发者的好评,作为一个表单验证的解决方案,Validation有很多的优点,比如:
内置的验证规则，如：必填、数字、E-Mail、URL和信用卡号码等19类内置验证规则
可以自定义验证规则：可以很方便地自定义验证规则
简单而且强大的验证信息提示：没人了验证信息提示，并提供自定义覆盖默认提示信息功能
实时进行验证的功能.：通过blur和keyup时间来触发验证规则
此外，还是用ajax实现了服务器端远程验证。
下载地址：http://plugins.jquery.com/project/vlidate
写法一（推荐直接使用写法三，因为它实现了行为与结构的分离）
废话少说，代码解释：
<script
<script
<script
<form
验证效果：
上面绿色标出的部分是需要注意的部分，也是validation执行验证的部分。可以看到validation统计一段$("#commentForm").validate();便可完成原来繁重任务。你可能会问，他的验证规则在哪里啊，为什么获取一个form表单元素连上一个validate()便可完成验证。其实validation把验证规则都封装在了内部，还记from表单里标出的class和minlength属性么，它可以来调去告诉其自身所在input元素所用的验证规则，如：<input
其他验证的写法
写法二
上面的方法时而将验证信息写在class中，时而写在minlength中实在麻烦，validation充分考虑了这一点，设置了另一种方法，将与验证相关的信息都写在class属性中，便于管理。操作步骤如下：
1
2
3
<input
<input
<input
<textarea
写法三
上面的写法并没有完全脱离HTML结果，下面介绍一种与HTML元素属性无直接关联，而是通过name属性来关联字段和验证规则的验证写法。这种写法实现了行为与结构的分离。
1
<input
<input
<input
<textarea
2
$("#formId").validate({
rules
username:
email
url
comment
}
})
验证信息
Validation插件的验证信息默认是英文的，如果要改为中文，只需要引入validation提供的中文验证信息库即可，引入代码如下：
<script
自定义验证信息
Validation插件可以很方便地自定义验证规则，用来代替千遍一律的默认验证信息。如：
<input
<input
<input
<textarea
如在jquery代码里加messages的话是和rules同级
$("#formid").validate({
rules:{
username:{required:true,minlength:2},
},
messages:{
username:{required:"必须填写",minlength:"最少2个字符"}
}
});
自定义验证信息并美化
在jquery中（与rules同级）添加下列代码：
errorElement
Success
label.text(
.
}
再在css中给em.error
自定义验证规则
创建规则：
$.validator
"formula",
function(value
return
},
'请输入正确的数学公式计算后的结果'
)
调用：
Rules中加入valcode
$("#formId").validate({
rules
username:
email
url
comment
valcode
}
})
Validation的具体属性及高级应用见下面链接：
http://wenku.baidu.com/view/1283e485ec3a87c24028c48a
自定义验证规则：
1064
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
