Question

我正在尝试创建jQuery表单，每次用户点击时都会自动更新。

目前我正在查询用户名是否正确;如果不是，它将使输入框呈红色。

这是我目前的代码（根本不起作用）。

jQuery的：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
    jQuery(function($) {
        $(document).click(function(e) {
            if (!$(e.target).closest('#jq-user-getval').length) {
                if ( $('#jq-user-getval').val() != '' ) {
                    if( $("#jq-user-getval").val() < 4) {
                        $("#jq-user-getval").addClass('border-force');
                    }
                }
            }
        })
    })  
</script>

正如您所看到的，我已经做到这一点，当用户点击输入框时，它会检查该框是否为空。如果它是空的，它将检查长度是否小于4个字符，那么它应该添加一个强制红色轮廓的类。但是，这不起作用。

这是HTML，我不确定问题是否在这里：

<form action="" method="post">
    <input id="jq-user-getval jq-user-class" type="text" name="username">
</form>

如果您可以建议任何更改，我正在尝试复制Microsoft的“Hotmail”注册表单。

Answer 1

您的id值不正确。从技术上讲，id不能包含空格。将您的<input />更改为：

<input id="jq-user-getval" class="jq-user-class" type="text" name="username" />

您使用.val() < 4的方式也是错误的。你无法将其与字符串进行比较：

"hello" < 4;         // This is meaningless.
"hello".length < 4;  // You should use this.

使用.blur()功能：

$(function () {
  $("#jq-user-getval").blur(function () {
    if (this.value.trim().length !== 0 && this.value.trim().length < 4)
      $(this).addClass("border-force");
  });
});

如果您动态加载<input />，则可以这样方式委派事件：

$(function () {
  $(document).on("blur", "#jq-user-getval", function () {
    if (this.value.trim().length !== 0 && this.value.trim().length < 4)
      $(this).addClass("border-force");
  });
});

为了额外的安全性，我添加了.trim()，就像人们可能会放弃空间一样。

你没有真正的理由在这里任何地方使用.click()功能。点击即可真正触发blur上的<input />事件。

Answer 2

您可以使用Jquery Validation。

基本示例：

<input id="username" name="username" maxlength="4" type="text" required>

$("#yourFormID).validate();

如果输入无效，则输入addClass红色轮廓

你必须在validate（）函数

中使用errorPlacement，errorClass属性

用户名长度验证jQuery

2 个答案: