<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=http://www.111cn.net> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>php jquery check username ajax檢查帳號唯一性</title> <link href="../style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> <script> $(document).ready(function(){ $('#username').keyup(username_check); }); function username_check(){ var username = $('#username').val(); if(username == "" || username.length < 4){ $('#username').css('border', '3px #CCC solid'); $('#tick').hide(); }else{ jQuery.ajax({ type: "POST", url: "check.php", data: 'username='+ username, cache: false, success: function(response){ if(response == 1){ //不可以註冊 $('#username').css('border', '3px #C33 solid'); $('#tick').hide(); $('#cross').fadeIn(); }else{ $('#username').css('border', '3px #090 solid'); $('#cross').hide(); $('#tick').fadeIn(); } } }); } } </script> <style> #username{ padding:3px; font-size:18px; border:3px #CCC solid; } #tick{display:none} #cross{display:none} </style> </head> <body> Username: <input name="username" id="username" type="text" /> <img id="tick" src="tick.png" width="16" height="16"/> <img id="cross" src="cross.png" width="16" height="16"/> </body> </html> |