等待-放飞梦想 » 评论

WordPress评论表单验证

Await — Sat, 28 Nov 2009 02:50:40 +0000

wordpress的评论只是个很简单的表单。WP本身也有一个自身的验证系统。但自带的这个验证是基于后台的验证。当表单不符合规格时跳转到另一个页面。我们需要返回上一页才能继续填写表单。这样对于用户的体验并不友好；所以一个基于前端的验证很需要。大家平时也一定有见过各种各样的表单验证。有些表单的验证很复杂，也很强大。不过WP的验证很简单。只需要验证“昵称”、“E-mail”、和评论就行了。http地址因为不是必须的。所以只需要在用户有输入的情况下判断下地址是否符合正常的格式就行了。来看下这个简单的验证效果：

下面来说说这个简单的表单验证。当然，还是基于jQuery的。

var Msg = new Array(
"用户名不能为空",
"昵称不能少于3个字符",
"E-mail地址不能为空",
"请输入正确的E-Mail地址",
"url地址不正确",
"评论内容不能少于5个字符",
"输入正确"
);

首先定义一个提示信息的数组。

if( $(this).is('#author') ){
$(this).next().remove();
if( this.value==""){
$(''+Msg[0]+'').insertAfter(this);
}
else if(this.value.length < 3 ){
$(''+Msg[1]+'').insertAfter(this);
}
else {
$(''+Msg[6]+'').insertAfter(this);
}
}

验证昵称：如果用户输入的字符为空，或少于3个。刚显示相应的错误信息，否则显示输入正确。

//验证邮件地址
if( $(this).is('#email') ){
$(this).next().remove();
if( this.value==""){
$(''+Msg[2]+'').insertAfter(this);
}
else if( this.value!="" && !/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(this.value)){
$(''+Msg[3]+'').insertAfter(this);
}
else {
$(''+Msg[6]+'').insertAfter(this);
}
}

验证E-mail地址：和验证昵称一样。这里是用正则去匹配地址是否正确；

//验证url
if( $(this).is('#url') ){
$(this).next().remove();
if( this.value!="" && !/^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/.test(this.value)){
$(''+Msg[4]+'').insertAfter(this);
}
}

验证url地址，因为这个不是必须的，所以只在有输入的情况下才去判断地址是否正确

//提交，最终验证
$('#submit').click(function(){
$("#commentform :input").trigger('blur');
//验证评论内容
if( $("textarea").val() == ""|| $("textarea").val().length < 5){
tipsWindown("提示","text:评论内容不能为空或少于5个字符!","250","150","false","2000","false","msg");
return false;
}
var numError = $('form .onError').length;
if(numError){
tipsWindown("提示","text:请正确填写表单内容","250","150","false","2000","false","msg");
return false;
}else{
tipsWindown("提示","text:正在提交评论...","250","150","false","2000","false","msg");
$(".formtips").remove();
}
});

最后。绑定事件，然后验证评论内容是否为空或小于5个字符。如果为true则弹出提示层，并阻止表单的提交。否则弹出提示：正在提交评论…然后清除提示信息；OK，一个基于JQ的简单的表单验证完成了；

2008-09-15 -- jquery基础教程二[伸缩、隔行变色...] (3)
在上一篇介绍中已经讲了一些基本的应用，今天继续。先看一下面这个例子 Demo_5：收缩展开功能[如无法运行请多刷新几次或保存到本地运行] 可伸缩块 p,d...
2011-09-08 -- jQuery中queue和dequeue的用法 (1)
今天在做右下角那个静止的工具栏时遇到了一个问题。鼠标放上去的时候，要让周围的4个按钮按顺序显示出来，移开的时候要按顺序隐藏。左思右想发现用animate的回调函数方式来写比较麻烦。于是百度了下，发现j...
2011-08-17 -- Flight主题更新 (16)
这几天收到有些童鞋反应主题在wp3.2版本后台不能快速编缉文章，不能上传图片。抽空看了下，是JQ库版本冲突引起，现已更新。请移步到wopus主题站下载更新后的版本。也可以通过115网盘下载。...
2010-11-24 -- JQ弹出层插件(tipsWindow 2.8) (154)
已更新为2.7...
2010-10-12 -- 分享Flight主题中的焦点图（基于JQ） (22)
关于这个焦点图没啥说的了，网上太多了。但自己一直没找到个合适的。现在的这个是Dreamy主题中的升级版，虽然看起来一模一样。其实做了很多扩展，优化了结构和JS部分。可以选择切换方式（左右滚动，上下滚动...

jquery基础教程二[伸缩、隔行变色...]

Await — Tue, 16 Sep 2008 03:34:55 +0000

在上一篇介绍中已经讲了一些基本的应用，今天继续。先看一下面这个例子
Demo_5：收缩展开功能[如无法运行请多刷新几次或保存到本地运行]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>可伸缩块</title> <style type="text/css"> p,div{margin:0;padding:0; font-size: 12px;} .box {float: left; margin-left: 20px; dipaly:inline;} .title1,.title2,.title3{width:280px;background:#cf0;height:20px;line-height: 20px;border:1px solid #aaa; text-align:center;} .content1,.content2,.content3{width:260px;height:350px;border:1px solid #aaa;border-top:none;padding: 10px;} </style> <script type='text/javascript' src="http://leotheme.cn/wp-includes/js/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".title1").click(function(){$(".content1").slideDown("slow");}); $(".title2").click(function(){$(".content2").slideUp("slow");}); $(".title3").click(function(){$(".content3").slideToggle("slow");}); }); </script> </head> <body> <div class="box"> <p class="title1">slideDown</p> <div class="content1"> 通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。 speed (String,Number) : 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000) </div></div> <div class="box"> <p class="title2">slideUp</p> <div class="content2"> 通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏起来。 speed (String,Number) : 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000) </div> </div> <div class="box"> <p class="title3">slideToggle</p> <div class="content3"> 通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。 speed (String,Number) : 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000) </div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

通过这个例子，你就能做像我侧边栏的收缩效果了，而且很简单，一行代码就行了，怎么样？

下面我们再来看一个很实用的例子
Demo_7：隔行变色, 鼠标滑过变色，点击变色

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>StripingTable</title> <script type='text/javascript' src="http://leotheme.cn/wp-includes/js/jquery/jquery.js"></script>  <script type="text/javascript"> $(document).ready(function(){ $(".stripe li:even").addClass("alt"); //给class为stripe的列表的偶数行添加class值为alt $(".stripe2 li").mouseover(function(){ //如果鼠标移到class为stripe的列表的li上时，执行函数 $(this).addClass("over");}).mouseout(function(){ //给这行添加class值为over，并且当鼠标一出该行时执行函数 $(this).removeClass("over");}); //移除该行的class $(".stripe3 li").click(function(){ $(this).toggleClass("alt");});//点击变色,注意：因为有隔行变色，所以这里必须在触发toggleClass时,remove("alt"). }); </script> <style> body { margin: 0 auto; text-align: center; } ul { width: 500px; margin: 0 auto; text-align:left; list-style: none; border: 1px solid #c2c2c2; border-bottom:none; margin-top: 10px; } li { padding:6px; border-bottom: 1px solid #c2c2c2; } .alt { background:#ecf6fc; /*这行将给所有的li加上背景色*/ } .over { background:#bcd4ec; /*这个将是鼠标高亮行的背景色*/ } .click{background:yellow;} </style> </head> <body> <ul class="stripe"> <li>隔行变色</li> <li>Name ：Louis</li> <li>E-mail：yltfy2008@gmail.com</li> <li>Q Q：214227707</li> <li>WWW：http://leotheme.cn/</li> <li>……</li> </ul> <ul class="stripe2"> <li>鼠标滑过变色</li> <li>Name ：Louis</li> <li>E-mail：yltfy2008@gmail.com</li> <li>Q Q：214227707</li> <li>WWW：http://leotheme.cn/</li> <li>……</li> </ul> <ul class="stripe3"> <li>点击变色</li> <li>Name ：Louis</li> <li>E-mail：yltfy2008@gmail.com</li> <li>Q Q：214227707</li> <li>WWW：http://leotheme.cn/</li> <li>……</li> </ul> </body> </html>

提示：你可以先修改部分代码再运行。

通过这个例子，大家可以很方便得做出评论隔行变色的效果了。

好了，今天就讲这两个实用的例子了。大家可以去试试

2008-09-11 -- jquery基础教程一[click,addClass,show,hide] (3)
原创内容—转载请说明出处. jQuery我想很多人都知道，但用WP的好像很少有人说到这个。今天开始和大家一起来研究下如何用jQuery来为我们的WP添加实用的功能。至于jQuery的相关背景和资...
2008-08-28 -- 利用WP自带的JS库打造超酷的侧边栏 (6)
从这篇文章开始，我们来认识下wordpress自带的JS库，下面这张图是WP自动的JS文件夹。可以看出有很多JS文件，当然包括大名鼎鼎的jquery和prototype。利用这些我们能实现很多很酷的效...
2009-11-30 -- 不刷新（AJAX）获取文章的内容 (53)
相信大家都知道AJAX评论这玩意。AJAX评论带来了很多好处，不用在刷新页面就能发表评论。实时提交，实时显示。很多人都用上了都给自己的BLOG上添加了这样的功能。方法在这就不说了，很多人都作了详细的讲...
2009-11-28 -- WordPress评论表单验证 (20)
wordpress的评论只是个很简单的表单。WP本身也有一个自身的验证系统。但自带的这个验证是基于后台的验证。当表单不符合规格时跳转到另一个页面。我们需要返回上一页才能继续填写表单。这样对于用户的体验...
2009-06-11 -- jQuery 实现 tab 切换一例 (11)
对于Tab切换，我想大家都不陌生了。现在几乎是到处可见了；今天为大家介绍下怎么用jQuery来实现一个简单的Tab切换效果。其实这类例子网上也有很多了，在这里不讨论它的实现原理，因为都是些最基本的应用...

您可能也喜欢：
WordPress主题：perfct 1.0	wordpress定制首页输出	WordPress主题之Maxthon 2.0.2[08-08-11]	WordPress主题”Dreamy”发布	WordPress主题高级技巧
无觅

您可能也喜欢：
jQuery中queue和dequeue的用法	jQuery实现背景图渐变切换	用jQuery实现个性有序列表	jquery基础教程三[渐变效果]	jQuery 实现 tab 切换一例
无觅

等待-放飞梦想 » 评论

WordPress评论表单验证

相关文章

jquery基础教程二[伸缩、隔行变色...]

相关文章