带有用户名可用性检查的jQuery表单验证答案

【问题标题】：jquery form validation with username availibility check带有用户名可用性检查的jQuery表单验证
【发布时间】：2013-01-13 15:48:54
【问题描述】：

我正在使用 jQuery (jquery.validate.js) 进行表单验证。我需要检查用户名是否可用，但我不知道该怎么做。请帮忙。

HTML：

<input type="text" name="username" class="required checkAvailability" />

jQuery:

$(document).ready(function(){

  $.validator.addMethod("checkAvailability", function(username) {
    var isSuccess = false;
    $.ajax({ url: "/checkAvailibility",
      data: "username=" + username,
      async: false,
      success: function(available) {
        if (available == "TRUE")
            isSuccess = true;
        return $("message", returnData).text() == "Username available";
      }
    });
  }, "Username not available");

  $("#formID").validate();

});

服务器端程序返回一个“TRUE”或“FALSE”字符串（由“returnData”变量返回）。

我的问题：如何将消息和检查结果都返回给 validate() 以便消息可以显示在字段旁边并且如果用户名不可用则不会提交表单？

【问题讨论】：

docs.jquery.com/Plugins/Validation/Validator/…

标签： jquery jquery-validate

【解决方案1】：

你能稍微重构一下你的代码吗？比如：

$(document).ready(function(){

  $validUsername = false;

  $("input.checkAvailability").keyup(function(){

    $.ajax({ url: "/checkAvailibility",
      data: "username=" + $(this).val(),
      success: function(available) {
        if (available == "TRUE"){
            $validUsername = true;
            $("message", returnData).text("Username available");
        }
        else{
            // Do something
        }
      }
    });

  }); 

  $.validator.addMethod("checkAvailability", function(username) {
    return $validUsername;
  }, "Username not available");

  $("#formID").validate();

});

【讨论】：

谢谢，但无论我的服务器端程序返回什么，“用户名不可用”总是出现。似乎是什么问题？

【解决方案2】：

在服务器上检查表单域的标准且最简单的方法是使用“远程”方法。从您的服务器端方法只返回文本“true”或“false”，而不是 returnData=true 或其他任何内容。

Javascript应该是这样的

<script>
$(function () {
    $('form').validate({
        rules: { username: 
            {
            remote: '/checkAvailibility'
            }
        }
    });
});
</script>

【讨论】：

【解决方案3】：

我通过使用 codeigniter 实现了这一点。愿这对你有帮助。

控制器功能：

  function checkUserName()
{
    $user_name=$_GET['user_name'];
    if(isset($user_name))
    {
        $arr=$this->home_model->checkUserName($user_name);
        $cnt=count($arr);
        if($cnt > 0)
            echo json_encode(false);
        else
            echo json_encode(true);
    }
}

模型功能：

function checkUserName($user_name)
{
    $this->db->select('a.id');
    $this->db->like('a.user_name',$user_name,'none');
    return $this->db->get('accounts a')->result();
    $this->db->get('accounts a')->result();
    echo $this->db->last_query();
    die;
}

HTML 和 JS：

<input type="text" name="user_name" placeholder="User name" id="user_name" class="form-control" value="">

JS：

$('#signup').validate(
{
    rules: 
    {
        user_name: 
        {
               //required: true,
        remote: baseUrl+'home/checkUserName'
        }
    }

    //Your Code here.......
}

【讨论】：