Question

我有一些JQuery表单验证，其中我检查用户名的长度对于数据库而言并不长，但它似乎正在返回真正的eveytime。

我错过了什么吗？

HTML

<form name="contact" method"post" action="">
<fieldset>

<label for="username" id="username_label" class="form_label">Username</label>
<input type="text" name="username" id="username" size="30" value="" class="text-input" />
<label class="error" for="username" id="username_error">This field is required.        </label>
<label class="error" for="username" id="username_length">Your Username should be less than 30 characters.</label>
<input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
</fieldset>
</form>

的JavaScript

$(function() {
$('.error').hide();
$(".button").click(function() {
  // validate and process form here

$('.error').hide();
  var username_length = $("input#username").val().length;
    if (username_length < 30) {
    $("label#username_length").show();
    $("input#username").focus();
    return false;
  }
}

Answer 1

您可以使用JQuery Validator插件执行此操作;

只需更改你的html就可以了;

<label for="username">User Name:</label>
<input type="text" name="username" id="username"  value="..." />

使用这种方法你不需要用不同的id（username_error，username_length）定义这个多个标签标签来处理每一条约束消息，而不需要担心隐藏这些标签，jquery插件会为你处理这个并将适当的消息放入带有“用户名”的标签旋转中。并随意自定义此消息。

你的js就像这些;

$("form[name=contact]").validate({
//...
rules: {
        username: {
            required: true,
            maxlength: 30
}
//...
});

您的代码将更加干净，有关详细信息，请参阅API文档，http://docs.jquery.com/Plugins/Validation

Answer 2

我有一些JQuery表单验证，其中我检查用户名的长度对于数据库而言并不长，但它似乎正在返回真正的eveytime。

您正在检查unsername是否短于30，而不是更长！

if (username_length < 30) {// !!!

请注意：

没有必要为id选择器添加元素类型id是唯一的，任何添加到它的东西，都会增加选择器的开销

$("input#username") =＆gt; $('#username')

JQuery表单字符串长度验证

2 个答案: