jquery.validate利用remote來實現ajax驗證範例

jquery.validate可謂是個強大的表單驗證外掛程式，當然也完美支援ajax驗證，這樣可以方便、快速來實現檢查使用者名稱等等是否存在。

 

html/js源碼部分：

<form action="" name="infos" id="infos">

 

    <p>使用者名稱：<input type="text" name="username" id="username" /></p>

 

    <p><input type="submit" name="sub" /></p>

 

</form>

 

<script type="text/javascript">

 

$(function(){

 

    $('#infos').validate({

 

        debug:false,

 

        onkeyup:false,

 

        rules:{

 

            username:{

 

                required:true, 

 

                remote:{

 

                    type:"POST",

 

                    url:"ajax.php", //請求地址

 

                    data:{

 

                        username:function(){ return $("#username").val(); }

 

                    }

 

                }

 

            }

 

        },

 

        messages:{

 

            username:{

 

                required:"使用者名稱必填",

 

                remote:"使用者名稱已存在"

 

            }

 

        },

 

        submitHandler:function(form){

 

            alert("驗證通過");

 

        }

 

    });

 

});

 

</script>

 

php源碼部分：

 

<?php

 

if( $_REQUEST['username'] == 'php' )

 

{

 

    exit( "false" ); //使用者名稱已存在

 

}

 

else

 

{

 

    exit( "true" ); //使用者名稱不存在，驗證通過，輸出“true”，並結束程式

 

}

 

?>

 

範例運行效果：

 

 

 

 

需要注意的就是服務端輸出true或者false的時候，不要直接輸出，要用引號引起來（如上圖效果）