javascript - jQuery 验证插件在检查用户名时抛出错误

Question

JSFIDDLE:http://jsfiddle.net/c56z1674/ (错误解释见文末)

我的 HTML(为了简化目的，我只包含用户名字段):

<form id="form_register_create" method="get" action="">
    <input type="text" id="register_username" name="register_username" placeholder="username" autocomplete="off" autofocus required>
    <input type="submit" id="form_register_create_submit" style="display:none">    
</form>

我的JS:

$('#form_register_create').validate({
    // specify rules
    rules : {
        register_username : {
            required : true,
            register_username : true,
            minlength : 3,
            maxlength : 18,
            remote : {
                url : "../system/check-uniqueness-username.php",
                type : "post"
            }
        }
    },
    // specify error messages
    messages : {
        register_username : {
            required : "Please enter a username.",
            register_username : "Please enter a username (between 3 and 18 chars).",
            remote : "Username already in use!"
        }
    },
    // when everything is valid, fire register function
    submitHandler : function(form) {
        register_create();
    }
});

我的 PHP (check-uniqueness-username.php):

<?php

require_once 'db.php';

$username = trim(strtolower($_REQUEST['register_username']));


$results = $db -> query("SELECT * FROM users WHERE username = $username");  

if(mysqli_num_rows($results) == 1) {
 $valid = 'false';
}
else{
 $valid = 'true';
} 


echo $valid;
exit;

出现以下错误:

当我在字段中输入用户名并通过单击另一个字段离开该字段时，我在控制台中收到以下错误消息:

Uncaught TypeError: Cannot read property 'call' of undefined

我发现: 如果我在验证脚本的规则部分中省略“register_username : true”部分，则不会发生此错误。但忽略这一部分对我来说不是一个选择，因为在这种情况下我将无法检查用户名的唯一性。

有谁知道如何避免这个错误？您可以自己尝试一下，在用户名字段中输入一些内容，然后单击电子邮件字段:http://jsfiddle.net/c56z1674/

Answer 1

我猜您正在使用 jQuery 验证文档 example为此:

$( "#myform" ).validate({
  rules: {
    email: {                         // <----- email(1)
      required: true,
      email: true,                   // <----- email(2)
      remote: "check-email.php"
    }
  }
});

字段名称相同，但 email(2) 是内置验证，用于检查字段是否包含有效的电子邮件。 (Documentation)

因此，在您的代码中，只需删除“register_username : true”，因为它不是可用选项，您的验证脚本将进行 php 调用。

JSFiddle

HTML:

<form id="form_register_create" method="get" action="">
    <input type="text" id="register_username" name="register_username" placeholder="username" autocomplete="off" autofocus required>
    <input type="submit" id="form_register_create_submit" style="display:none">    
</form>

JS:

$('#form_register_create').validate({
    // specify rules
    rules : {
        register_username : {
            required : true,
            minlength : 3,
            maxlength : 18,
            remote : {
                url : "../system/check-uniqueness-username.php",
                type : "post"
            }
        }
    },
    // specify error messages
    messages : {
        register_username : {
            required : "Please enter a username.",
            register_username : "Please enter a username (between 3 and 18 chars).",
            remote : "Username already in use!"
        }
    },
    // when everything is valid, fire register function
    submitHandler : function(form) {
        register_create();
    }
});