jQuery validate表单验证插件使用方法

相信大家在网站开发过程中经常要在客户端对用户填写的表单进行验证,那么可以通过javascript来验证.下面介绍一下javascript框架jQuery表单插件的用法:

一.下载jquery表单验证插件

地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation/

API:http://docs.jquery.com/Plugins/Validation

二.使用方法

1)首先在页面head引入jquery.js和jquery.vaidate.js
<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript” src=”jquery.validate.js”></script>

2)验证方法

a)在需要验证的表单元素中加class=”验证规则”,如下:
<input type=”text” name=”txt” class=”required” />
<input type=”text” name=”txt1″ class=”{required:true,minlength:5}” />

规则说明:required:true 必填

minlength:最小长度

maxlength:最大长度

rangelength: [3,10] 长度介于 3 和 {1} 之间的字符串

range:[100,1000] 只能是100和 1000 之间的值”

min:最小值

max:最大值

email:true 验证邮箱

url:true 验证是否是合法的网址

date:true 验证是否是合法的日期 new Date() 类型格式

dateISO:true 验证是否是合法的日期 年/月/日 或 年-月-日 格式

number:true 验证是否是合法的数字

digits:true 验证是否为整数

creditcard: 验证合法的信用卡号

equalTo:”要匹配的元素” 如:’#cnfpass’ , 验证两次输入值是否相同

accept: “gif|png|jpg” 验证是否是合法后缀名的字符串

remote:’url’ 远程验证输入的值是否合法 url是返回true验证成功,false验证失败

这些是插件中提供的验证规则,插件中还提供了增加规则的方法,可以来增加一些我们自己规则,方法如:

jQuery.validator.addMethod(”规则名称”, function(value, element, params) {
return this.optional(element) || 验证value
}

b)使用jquery.validate的validate方法来验证
<script>
$(function(){
$(’#frm’).validate({
rules:{
username:{
required:true,
minlength:4,
remote:’check_username.php’
},
password:{
required:true,
minlength:6,
equalTo:’#cnfpass’
},
cnfpass:{
required:true
}
},
messages:{
username:{
required:’必填’,
minlength:’最小长度3′,
remote:’已存在’
},
password:{
required:’必填’,
minlength:’最小长度6′,
equalTo:’两次输入密码不一致’
},
cnfpass:{
required:’必填’
}
},
submitHandler:function(form){

form.submit(); //注意这个地方不能用$(from).submit
}
})
})
</script>
<form name=”frm” id=”frm” method=”post” action=”">
<input type=”text” name=”username”>
<input type=”text” name=”password”>
<input type=”text” name=”cnfpass”>
<input type=”submit” value=”提交”>
</form>

说明:rules: 验证规则, messages: 错误提示(如不提定显示的标签,会在元素后插入标签,默认样式为 class=”error”)

摘自：http://www.webscript.cn/index.php/archives/124