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==""){
- $('<span class="formtips onError">'+Msg[0]+'</span>').insertAfter(this);
- }
- else if(this.value.length < 3 ){
- $('<span class="formtips onError">'+Msg[1]+'</span>').insertAfter(this);
- }
- else {
- $('<span class="formtips onok">'+Msg[6]+'</span>').insertAfter(this);
- }
- }
验证昵称：如果用户输入的字符为空，或少于3个。刚显示相应的错误信息，否则显示输入正确。
- //验证邮件地址
- if( $(this).is('#email') ){
- $(this).next().remove();
- if( this.value==""){
- $('<span class="formtips onError">'+Msg[2]+'</span>').insertAfter(this);
- }
- else if( this.value!="" && !/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(this.value)){
- $('<span class="formtips onError">'+Msg[3]+'</span>').insertAfter(this);
- }
- else {
- $('<span class="formtips onok">'+Msg[6]+'</span>').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)){
- $('<span class="formtips onok">'+Msg[4]+'</span>').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的简单的表单验证完成了；
2011/06/11
2010/09/30
看来LZ JS研究比较深！
2010/09/27
我自己也加了JS前端校验，但是看了你的校验，能感觉到你的JS功底不错！
2010/09/08
看来博主对WordPress很在行，以后要多讨教讨教
2010/07/24
建议提供演示程序，便于理解！
（PS：博主的博客风格好漂亮！简介大方！）
2010/07/10
WordPress越来越流行。
2010/07/01
嗯 我搜索过来了
2010/05/17
用到了AJAX，挺不错！
但是教程写得不够详细，对于外行人来说几乎没有多大意义，根本无从下手