jQuery 前台評論表單驗證實例小結

 　　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;