[英]jquery form validation with username availibility check
我正在使用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(),以便消息可以显示在字段旁边,并且如果用户名不可用,则不会提交表单?
您可以稍微重组一下代码吗? 就像是:
$(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();
});
检查服务器上表单字段的最简单,标准的方法是使用“远程”方法。 从服务器端方法只需返回文本“ true”或“ false”,而不返回returnData = true或其他任何内容。
Javascript应该是这个
<script>
$(function () {
$('form').validate({
rules: { username:
{
remote: '/checkAvailibility'
}
}
});
});
</script>
我通过使用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.......
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.