原文地址: http://blog.csdn.net/ziwen00/archive/2009/09/14/4551346.aspx
jQuery的Validation插件
最新最全的jQuery插件可以从jQuery的官方网站上面获得,jQuery下载验证插件的地址是http://plugins.jquery.com/在打开页面的左上角’Search’框中输入validation就可以找到我们想要的验证插件了,在http://plugins.jquery.com/project/validate下,我们找到了目前最新的版本(2009年6月17日)官方推出的1.5.5版的validate.js.
Validation插件式历史悠久的jQuery插件之一,经过了全球各种项目的验证,得到了很多WEB开发者的好评,作为一个表单验证的解决方案,Validation有很多的优点,比如:内置的验证规则,可以自定义验证规则,简单而且强大的验证信息提示,实时进行验证的功能.都可以令前台开发变得非常的简单.Validation具有内置的必填,数字,Email,URL等多种验证规则.实时验证方面,通过blur和keyup时间来触发验证规则,可以达到实时验证的目的.
下面是一个简单的例子,HTML和jQuery代码如下:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>jQuery之验证插件</title>
<script type=’text/javascript’ src=’jquery-1.3.2.js’></script>
<!– 引入了jQuery库之后,继续引入validation插件 –>
<script type=’text/javascript’ src=’jquery.validate.js’></script>
<style type=’text/css’>
*{font-family:Verdana;font-size:96%;}
label.error{float:none;color:red;padding-left:.5em;vertical-align:top;}
p{clear:both;}
.submit{margin-left:12em;}
em{font-weight:bold;vertical-align:top;}
</style>
<script type=’text/javascript’>
$(document).ready(function(){
//确定哪一个表单需要进行验证
$(‘#commentForm’).validate();
});
</script>
</head>
<body>
<form class=’cmxform’ id=’commentForm’ method=’get’ action=’#'>
<fieldset>
<legend>一个简单的带有提示的评论例子</legend>
<p>
<label for=’cusername’>姓名</label><em>*</em>
<!– 针对不同的字段,进行验证规则编码,设置字段相应的属性 –>
<!– class=’required’来设置必填验证,minlength=’2′设置最小长度验证 –>
<input id=’cusername’ name=’username’ size=’25′ class=’required’ minlength=’2′/>
</p>
<p>
<label for=’cemail’>电子邮件</label><em>*</em>
<!– class=’required,email’为必填内容和email规则验证 –>
<input id=’cemail’ name=’email’ size=’25′ class=’required email’/>
</p>
<p>
<label for=’curl’>网址</label><em>*</em>
<!– class=’url’设置url验证 –>
<input id=’curl’ name=’url’ size=’25′ class=’url’ value=”/>
</p>
<p>
<label for=’ccomment’>你的评论</label><em>*</em>
<!– 对评论textarea进行必填验证 –>
<textarea id=’ccomment’ name=’comment’ cols=’25′ class=’required’></textarea>
</p>
<p>
<input class=’submit’ type=’submit’ value=’提交’>
</p>
</fieldset>
</form>
</body>
</html>
上面的代码实现了如下的验证:
1) 对”姓名”的必填和长度至少为2为的验证
2) 对”电子邮件”的验证和是否为E-mail格式的验证
3) 对”网址”是否为url的验证
4) 对”你的评论”的必填验证
5) 提供了在用户输入的时候对长度的实时验证
只需要完成如下几步,就可以将一个普通的表单变成一个可以进行验证的表单:
1) 引入jQuery库和Validation插件
view plaincopy to clipboardprint?
<mce:script type=’text/javascript’ src=”jquery-1.3.2.js” mce_src=”jquery-1.3.2.js”></mce:script>
<!– 引入了jQuery库之后,继续引入validation插件 –>
<mce:script type=’text/javascript’ src=”jquery.validate.js” mce_src=”jquery.validate.js”></mce:script>
<mce:script type=’text/javascript’ src=”jquery-1.3.2.js” mce_src=”jquery-1.3.2.js”></mce:script>
<!– 引入了jQuery库之后,继续引入validation插件 –>
<mce:script type=’text/javascript’ src=”jquery.validate.js” mce_src=”jquery.validate.js”></mce:script>
2) 确定是哪一个表单需要被验
view plaincopy to clipboardprint?
$(document).ready(function(){
//确定哪一个表单需要进行验证
$(‘#commentForm’).validate();
});
$(document).ready(function(){
//确定哪一个表单需要进行验证
$(‘#commentForm’).validate();
});
3) 针对不同的字段,进行验证规则的编码,设置字段相应的属性
view plaincopy to clipboardprint?
<input id=’cusername’ name=’username’ size=’25′ class=’required’ minlength=’2′/>
<input id=’cemail’ name=’email’ size=’25′ class=’required email’/>
<textarea id=’ccomment’ name=’comment’ cols=’25′ class=’required’/>
<input id=’cusername’ name=’username’ size=’25′ class=’required’ minlength=’2′/>
<input id=’cemail’ name=’email’ size=’25′ class=’required email’/>
<textarea id=’ccomment’ name=’comment’ cols=’25′ class=’required’/>
将所有的验证规则写到class属性里:
在实际的开发中,有的时候将验证规则写到class=’required email’有的时候写到minlength=’2’里面,这样非常的不方便,有没有一种方式可以将所有的验证规则放到一个地方去呢?这个答案是肯定的.jQuery充分考虑到了这一点,我们可以通过另外一个JavaScript库来将所有的验证规则放到一个class文件当中去.这样就大大方面了对验证规则的管理.
1) 在下载的\jquery-validate\lib文件夹下面找到jquery.metadata.js.放到项目当中,然后引入该jQuery插件.jquery.metadate.js是一个支持固定格式解析的jQuery插件,Validation插件将其很好的融合到验证规则编码当中.
view plaincopy to clipboardprint?
<mce:script type=”text/javascript” src=”jquery.metadata.js” mce_src=”jquery.metadata.js”></mce:script>
<mce:script type=”text/javascript” src=”jquery.metadata.js” mce_src=”jquery.metadata.js”></mce:script>
2) 改变调用的验证方法
view plaincopy to clipboardprint?
<mce:script type=’text/javascript’><!–
$(document).ready(function(){
//确定那个表单进行验证(改变调用的验证方法)
$(‘#commentForm’).validate({meta: “validate”});
});
// –></mce:script>
<mce:script type=’text/javascript’><!–
$(document).ready(function(){
//确定那个表单进行验证(改变调用的验证方法)
$(‘#commentForm’).validate({meta: “validate”});
});
// –></mce:script>
3) 将所有的验证规则都通过类似{validate:{required:true,email:true}}的形式,写到class属性当中,详细的HTML代码如下:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>jQuery之验证插件</title>
<script type=’text/javascript’ src=’jquery-1.3.2.js’></script>
<!– 引入了jQuery库之后,继续引入validation插件 –>
<script type=’text/javascript’ src=’jquery.validate.js’></script>
<!– 引入一个新的jQuery插件 –>
<script type=”text/javascript” src=’jquery.metadata.js’></script>
<style type=’text/css’>
*{font-family:Verdana;font-size:96%;}
label.error{float:none;color:red;padding-left:.5em;vertical-align:top;}
p{clear:both;}
.submit{margin-left:12em;}
em{font-weight:bold;vertical-align:top;}
</style>
<script type=’text/javascript’>
$(document).ready(function(){
//确定那个表单进行验证(改变调用的验证方法)
$(‘#commentForm’).validate({meta: “validate”});
});
</script>
</head>
<body>
<form class=’cmxform’ id=’commentForm’ method=’get’ action=’#'>
<fieldset>
<legend>一个简单的带有提示的评论例子</legend>
<p>
<label for=’cusername’>姓名</label><em>*</em>
<input id=’cusername’ name=’username’ size=’25′ class=’{validate:{required:true,minlength:2}}’/>
</p>
<p>
<label for=’cemail’>电子邮件</label><em>*</em>
<input id=’cemail’ name=’email’ size=’25′ class=’{validate:{required:true,email:true}}’/>
</p>
<p>
<label for=’curl’>网址</label><em>*</em>
<input id=’curl’ name=’url’ size=’25′ class=’{validate:{url:true}}’ value=”/>
</p>
<p>
<label for=’ccomment’>你的评论</label><em>*</em>
<textarea id=’ccomment’ name=’comment’ cols=’25′ class=’{validate:{required:true}}’></textarea>
</p>
<p>
<input class=’submit’ type=’submit’ value=’提交’>
</p>
</fieldset>
</form>
</body>
</html>
将验证行为和HTML结构完全脱离的一种验证写法:
上面的两种写法,一种是通过给标签添加属性来完成验证,一种是通过jquery.metadate.js的帮助将所有的验证规则添加到class属性中,都没有符合jQuery提倡的”行为和操作分离”的一个原则,下面的方法就补足了这个缺陷,可以让HTML结构和验证规则很好的分离出来
HTML代码如下:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>jQuery之验证插件</title>
<script type=’text/javascript’ src=’jquery-1.3.2.js’></script>
<!– 引入了jQuery库之后,继续引入validation插件 –>
<script type=’text/javascript’ src=’jquery.validate.js’></script>
<style type=’text/css’>
*{font-family:Verdana;font-size:96%;}
label.error{float:none;color:red;padding-left:.5em;vertical-align:top;}
p{clear:both;}
.submit{margin-left:12em;}
em{font-weight:bold;vertical-align:top;}
</style>
<script type=’text/javascript’>
$(document).ready(function(){
$(‘#commentForm’).validate({
rules:{
username:{
required:true,
minlength:3
},
email:{
required:true,
email:true
},
url:”url”,
comment:”required”
}
})
});
</script>
</head>
<body>
<form class=’cmxform’ id=’commentForm’ method=’get’ action=’#'>
<fieldset>
<legend>一个简单的带有提示的评论例子</legend>
<p>
<label for=’cusername’>姓名</label><em>*</em>
<input id=’cusername’ name=’username’ size=’25′ />
</p>
<p>
<label for=’cemail’>电子邮件</label><em>*</em>
<input id=’cemail’ name=’email’ size=’25′ />
</p>
<p>
<label for=’curl’>网址</label><em>*</em>
<input id=’curl’ name=’url’ size=’25′ value=”/>
</p>
<p>
<label for=’ccomment’>你的评论</label><em>*</em>
<textarea id=’ccomment’ name=’comment’ cols=’25′></textarea>
</p>
<p>
<input class=’submit’ type=’submit’ value=’提交’>
</p>
</fieldset>
</form>
</body>
</html>
在这种”HTML和验证完全分离”的验证规则写法的步骤如下:
1) 在$(“#ccommentForm”).validate()方法中增加rules属性
2) 通过每个字段的name属性来匹配验证规则
3) 定义验证规则,比如required:true,email:true,minlength:2等等.
将默认的英文验证信息变成中文:
validation插件默认的验证信息是英文的,要想将validation验证插件给出的验证信息变成中文就可以到jquery-validate\localization文件夹下面找到messages_cn.js文件,这个就是中文的验证信息库,我们只需要在代码中将这个文件导入就可以实现中文验证信息的输出了.在jquery-validate\localization这个文件夹下面,还有很多种语言,我们可以选择适当的语言引入到我们的项目当中,实现提示信息的本地化.
view plaincopy to clipboardprint?
<!– 引入中文验证信息库 –>
<mce:script type=’text/javascript’ src=”messages_cn.js” mce_src=”messages_cn.js”></mce:script>
<!– 引入中文验证信息库 –>
<mce:script type=’text/javascript’ src=”messages_cn.js” mce_src=”messages_cn.js”></mce:script>
改变千篇一律的验证信息:
validaion验证插件可以非常方便的进行自定义验证规则,这样可以用来代替千篇一律的验证信息,具体修改好的HTML代码如下:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>jQuery之验证插件</title>
<script type=’text/javascript’ src=’jquery-1.3.2.js’></script>
<!– 引入了jQuery库之后,继续引入validation插件 –>
<script type=’text/javascript’ src=’jquery.validate.js’></script>
<!– 引入中文验证信息库 –>
<script type=’text/javascript’ src=’messages_cn.js’></script>
<!– 要将所有的验证规则放到css标签当中去,就要引入metadate.js –>
<script type=’text/javascript’ src=’jquery.metadata.js’></script>
<style type=’text/css’>
*{font-family:Verdana;font-size:96%;}
label.error{float:none;color:red;padding-left:.5em;vertical-align:top;}
p{clear:both;}
.submit{margin-left:12em;}
em{font-weight:bold;vertical-align:top;}
</style>
<script type=’text/javascript’>
$(document).ready(function(){
$(‘#commentForm’).validate({meta:”validate”});
});
</script>
</head>
<body>
<form class=’cmxform’ id=’commentForm’ method=’get’ action=’#'>
<fieldset>
<legend>一个简单的带有提示的评论例子</legend>
<p>
<label for=’cusername’>姓名</label><em>*</em>
<input id=’cusername’ name=’username’
margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; text-indent: 0px; “> {validate:{required:true,minlength:2,messages:{
”
size=’25′ />
</p>
<p>
<label for=’cemail’>电子邮件</label><em>*</em>
<input id=’cemail’ name=’email’
margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; text-indent: 0px; “> {validate:{required:true,email:true,messages:{
”
size=’25′ />
</p>
<p>
<label for=’curl’>网址</label><em>*</em>
<input id=’curl’ name=’url’
margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; text-indent: 0px; “> ”
size=’25′ value=”/>
</p>
<p>
<label for=’ccomment’>你的评论</label><em>*</em>
<textarea id=’ccomment’ name=’comment’
margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; text-indent: 0px; “> ”
cols=’25′></textarea>
</p>
<p>
<input class=’submit’ type=’submit’ value=’提交’>
</p>
</fieldset>
</form>
</body>
</html>
具体来说,上面的代码就是在class的属性中增加了类似messages:{required:’’,email:’’}形式的一块代码,这样就可以显示我们自定义的验证信息了.
自己来定义表单验证的业务规则:
通常在开发项目中,验证规则与实际的业务逻辑是息息相关的,一个好的验证插件必须要支持自定义验证机制,当然jQuery就提供了多种机制来满足用户的业务需要.
我们添加以下代码到上面的HTML代码中,方便进行验证码的功能实现.
view plaincopy to clipboardprint?
<p>
<label for=’cvalcode’>验证码</label>
<input id=’cvalcode’ name=’valcode’ size=’25′ value=”/>=7+9
</p>
<p>
<label for=’cvalcode’>验证码</label>
<input id=’cvalcode’ name=’valcode’ size=’25′ value=”/>=7+9
</p>
为了实现”验证码”的功能,我们需要以下几个步骤:
1) 自定义一个验证规则
view plaincopy to clipboardprint?
$.validator.addMethod(
“formula”, //验证方法的名称
function(value,element,param){ //验证规则
return value==eval(param);
},
‘请输入正确的结果’ //提示验证信息
);
$.validator.addMethod(
“formula”, //验证方法的名称
function(value,element,param){ //验证规则
return value==eval(param);
},
‘请输入正确的结果’ //提示验证信息
);
2) 在代码中引用以上验证规则
view plaincopy to clipboardprint?
$(‘#commentForm’).validate({
rules:{
username:{
required:true,
minlength:3
},
email:{
required:true,
email:true
},
url:”url”,
comment:”required”,
valcode:{formula:”7+9″}
}
})
技术丑闻(Techdirt)
