ygs' blog

简单的 jQuery 前台评论表单验证

作者：

imygs

在

WordPress 当然也有表单的验证，不过大家都知道用户体验一点都不好，页面发生跳转，有时还会把表单清空了，而前台表单认证显得非常有必要了。以下是我写的通过改变文本框背景颜色提示用户输入内容，WordPress 只要把以下代码放到 js 文件里就能工作了。验证由点击提交按钮触发，工作原理看注释。

//表单验证
$(function(){
    $('#submit').click(function(){
        var $author=$('#author').val();   //名称
        var $email=$('#email').val();     //邮箱
        var $url=$('#url').val();         //网址
        var $textarea=$('textarea:first').val();   //评论
        var $errorNo=0;
        if($author==""){
            $('#author').css("background","#F9A4A4");
            $errorNo+=1;
        }else{
            $('#author').css("background","#FFF");
        }
        if($email==""){
            $('#email').css("background","#F9A4A4");
            $errorNo+=1;
        }else if(!/^(?:[a-zd]+[_-+.]?)*[a-zd]+@(?:([a-zd]+-?)*[a-zd]+.)+([a-z]{2,})+$/i.test($email)){
            $('#email').css("background","#F9A4A4");
            $errorNo+=1;
        }else{
            $('#email').css("background","#FFF");
        }
        if($url!="" && !/^http://[A-Za-z0-9]+.[A-Za-z0-9]+[/=?%-&_~`@[]':+!]*([^<>""])*$/.test($url)){
            $('#url').css("background","#F9A4A4");
            $errorNo+=1;
        }else{
            $('#url').css("background","#FFF");
        }
        if($textarea==""){
            $('textarea:first').css("background","#F9A4A4");
            $errorNo+=1;
        }else{
            $('textarea:first').css("background","#FFF");
        }
        if($errorNo>0){
            return false;
        }
    });
});

这样一个非常简单的表单验证就出来了~效果就是小博现在这样，欢迎指正改进~

PS:8月14日修正，更严密的正则表达式。
PS2:2013年10月18日修正，真是弄巧反拙，简单复杂化……现已修正。

更多文章