javascript - 如何在表单验证 jquery 中使用用户名可用性检查器脚本

Question

我是 jquery 的新手。我是否有以下代码来检查用户名可用性。

脚本运行良好。检查用户名是否可用。

  <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

 <script type="text/javascript">
$(function()
{
$('.user_name').keyup(function()
{
 var checkname=$(this).val();
var availname=remove_whitespaces(checkname);
 if(availname!=''){
 $('.check').show();
 $('.check').fadeIn(400).html('<img src="image/ajax-loading.gif" /> ');

 var String = 'username='+ availname;

   $.ajax({
       type: "POST",
      url: "available.php",
      data: String,
      cache: false,
      success: function(result){
           var result=remove_whitespaces(result);
           if(result==''){
                   $('.check').html('<img src="image/accept.png" /> This Username Is Avaliable');
                   $(".check").removeClass("red");
                   $('.check').addClass("green");
                   $(".user_name").removeClass("yellow");
                   $(".user_name").addClass("white");
           }else{
                   $('.check').html('<img src="image/error.png" /> This Username Is Already Taken');
                   $(".check").removeClass("green");
                   $('.check').addClass("red")
                   $(".user_name").removeClass("white");
                   $(".user_name").addClass("yellow");
           }
      }
  });
   }else{
     $('.check').html('');

  }
  });
  });

 function remove_whitespaces(str){
 var str=str.replace(/^\s+|\s+$/,'');
 return str;
}

available.php 包含以下代码。

  if(isset($_POST['username']) && !empty($_POST['username'])){
  $username=mysql_real_escape_string($_POST['username']);
  $query="select * from sell where LOWER(uname)='$username'";
  $res=mysql_query($query);
  $count=mysql_num_rows($res);

  if($count > 0){
      echo "true";

  }else{
      echo "false";

  }
 }

一切正常。 ajax 发布并检查值是否存在。

但我的问题是如何将上述脚本包含在以下 jquery 验证脚本中。

       $(document).ready(function(){
       $("#f2").validate({
         debug: false,
      rules: {    
              name: {
         required:true,
         minlength:3
//Here how to call the above script function..i stuck here..

            }
           });
           });

根据名称的可用性，我需要处理表单以提交 .php，否则表单将不会被提交。

任何建议，可接受。

Answer 1

在验证函数中添加此脚本

<script>
   $(document).ready(function(){
   $("#f2").validate({
     debug: false,
     rules: {
        name: {
           required:true,
           minlength:3,
           remote:{
              url: "available.php",
              type: "post",
              data: {
                username: function() {
                   return $( ".user_name" ).val();
                }
              }
           }
        }
     }
   });
</script>

删除“keyup”事件函数，然后你就完成了...