当前位置：

首页 > WP相关 & 前端交互

WordPress评论表单验证

2009年11月28日 10:50   作者：Await   分类：WP相关 & 前端交互   浏览：532  

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

form1

form2

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

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

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

  1. if( $(this).is('#author') ){
  2.             $(this).next().remove();
  3.             if( this.value==""){
  4.                 $('<span class="formtips onError">'+Msg[0]+'</span>').insertAfter(this);
  5.             }
  6.             else if(this.value.length < 3 ){
  7.                 $('<span class="formtips onError">'+Msg[1]+'</span>').insertAfter(this);
  8.             }
  9.             else {
  10.                 $('<span class="formtips onok">'+Msg[6]+'</span>').insertAfter(this);
  11.             }
  12.         }

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

  1. //验证邮件地址
  2.         if( $(this).is('#email') ){
  3.             $(this).next().remove();
  4.             if( this.value==""){
  5.                 $('<span class="formtips onError">'+Msg[2]+'</span>').insertAfter(this);
  6.             }
  7.             else if( this.value!="" && !/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(this.value)){
  8.                 $('<span class="formtips onError">'+Msg[3]+'</span>').insertAfter(this);
  9.             }
  10.             else {
  11.                 $('<span class="formtips onok">'+Msg[6]+'</span>').insertAfter(this);
  12.             }
  13.         }

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

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

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

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

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

本文引用地址： 

上一篇：一个jQuery弹出层(tipsWindown) 下一篇：不刷新（AJAX）获取文章的内容

相关文章

  • 2008-09-15 -- jquery基础教程二[伸缩、隔行变色...] (3)
    在上一篇介绍中已经讲了一些基本的应用，今天继续。先看一下面这个例子 Demo_5：收缩展开功能[如无法运行请多刷新几次或保存到本地运行] 可伸缩块 p,d...
  • 2009-11-30 -- 不刷新（AJAX）获取文章的内容 (24)
    相信大家都知道AJAX评论这玩意。AJAX评论带来了很多好处，不用在刷新页面就能发表评论。实时提交，实时显示。很多人都用上了都给自己的BLOG上添加了这样的功能。方法在这就不说了，很多人都作了详细的讲...
  • 2009-11-25 -- 一个jQuery弹出层(tipsWindown) (14)
    弹出层效果网上很多很多，也没啥好说的了。写这个只是作为学习JQ的一些记录。此插件的一些方法参考了花匠的dialog；在此表示感谢。 接着说说这种弹出层的原理或者说是做法。总结下经验；首先需要一个遮罩...
  • 2009-08-28 -- jQuery实现背景图渐变切换 (4)
    链接的背景图切换一般都用CSS的HOVER来控制，虽然很方便，但效果不怎么酷，没有平滑效果，显得有点突然。在这篇文章里给大家介绍下如何用jQuery来实现一个平滑的渐变式背景切换。效果大家可以看下这个...
  • 2009-06-11 -- jQuery 实现 tab 切换一例 (9)
    对于Tab切换，我想大家都不陌生了。现在几乎是到处可见了；今天为大家介绍下怎么用jQuery来实现一个简单的Tab切换效果。其实这类例子网上也有很多了，在这里不讨论它的实现原理，因为都是些最基本的应用...

发表评论有 10 位网友发表了评论  

  1. AnQ 说：
    2010-01-26于16:51 下午

    很强大的功能，不错 ;-)

    回复
  2. jason 说：
    2010-01-05于09:56 上午

    很帅的评论系统

    回复
  3. Jutoy 说：
    2009-12-07于13:58 下午

    JQ应用越来越强大了……

    回复
  4. 明知道 说：
    2009-12-04于15:41 下午

    加在具体什么位置啊 这个有点困难

    回复
  5. bolo 说：
    2009-11-30于15:44 下午

    为什么昵称不能少于三个字符呢？

    回复
  6. francis 说：
    2009-11-28于17:41 下午

    炯，为什么不用jQhuery？

    回复
  7. LAONB 说：
    2009-11-28于17:41 下午

    比上期的漂亮，你是不是最近的工作就跟这个有关啊。

    回复
  8. cyusyu 说：
    2009-11-28于13:20 下午

    表单验证代码应该加在什么地方啊？

    回复

添加新的评论浏览评论»  

表情
icon_wink.gif icon_neutral.gif icon_mad.gif icon_twisted.gif icon_smile.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_cry.gif icon_cool.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif 



注意：
1、本站启用了审核机制，你的留言可能稍后才会显示，请不要重复提交，谢谢。
2、留言时的头像是Gravatar提供的服务。想设置的看这里。
3、评论者允许使用'@user空格'的方式将自己的评论通知另外评论者。

©WordPress. Theme by Await | 渝ICP备09011861号 返回顶部