WordPress评论表单验证

周六,2009 十一 28 10:50:40

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的简单的表单验证完成了；

上一篇：

下一篇：

   Await |  WP相关, 前端交互 |  浏览：1,626  

这篇文章已有 16 位网友发表了评论  

  1. 阅网博客 说：
    2010-07-24 于 17:26 下午

    建议提供演示程序，便于理解！
    （PS：博主的博客风格好漂亮！简介大方！）

    回复
  2. 黑客帝国 说：
    2010-07-10 于 17:49 下午

    WordPress越来越流行。

    回复
  3. 丕子 说：
    2010-07-01 于 12:20 下午

    嗯 我搜索过来了

    回复
  4. Ludou 说：
    2010-05-17 于 22:22 下午

    用到了AJAX，挺不错！
    但是教程写得不够详细，对于外行人来说几乎没有多大意义，根本无从下手

    回复
评论分页 1 2

发表新的评论

表情
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空格'的方式将自己的评论通知另外评论者。

goto-top