wordpress的评论只是个很简单的表单。WP本身也有一个自身的验证系统。但自带的这个验证是基于后台的验证。当表单不符合规格时跳转到另一个页面。我们需要返回上一页才能继续填写表单。这样对于用户的体验并不友好；所以一个基于前端的验证很需要。大家平时也一定有见过各种各样的表单验证。有些表单的验证很复杂，也很强大。不过WP的验证很简单。只需要验证“昵称”、“E-mail”...

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

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

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

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

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

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

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

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

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

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

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

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