jquery 通过 KeyUp 运行函数而不是提交

Question

我有这个代码来检查 url 是否是有效的 url。

现在只需按一下按钮即可完成检查。但我想去掉该按钮，而只是在用户在文本框中输入内容或完成输入时进行检查。

我怎样才能实现这个目标？我对 jquery 一点也不熟悉。

<script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<script type="text/javascript">
jQuery.validator.setDefaults({
    debug: true,
    success: "valid"
});;
</script>

  <script>
  $(document).ready(function(){
    $("#myform").validate({
  rules: {
    field: {
      required: true,
      url: true
    }
  }
});
  });
  </script>
  <style>#field { margin-left: .5em; float: left; }
    #field, label { float: left; font-family: Arial, Helvetica, sans-serif; font-size: small; }
    br { clear: both; }
    input { border: 1px solid black; margin-bottom: .5em;  }
    input.error { border: 1px solid red; }
    label.error {
        background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif') no-repeat;
        padding-left: 16px;
        margin-left: .3em;
    }
    label.valid {
        background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat;
        display: block;
        width: 16px;
        height: 16px;
    }
</style>


<form id="myform">
  <label for="field">Required, URL: </label>
  <input class="left" id="field" name="field" OnKeyUp="$("#myform").validate"/>
  <br/>
  <input type="submit" value="Validate!" />
</form>

Answer 1

看看下面的代码。我想这就是你所需要的。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script type="text/javascript">
jQuery.validator.setDefaults({
    debug: true,
    success: "valid"
});;
</script>

  <script>
  $(document).ready(function(){
    $("#myform").validate({
  rules: {
    field: {
      required: true,
      url: true
    }
  }
});

$("#field").keyup(function(){
$('#myform').valid();
});
  });
  </script>
  <style>#field { margin-left: .5em; float: left; }
    #field, label { float: left; font-family: Arial, Helvetica, sans-serif; font-size: small; }
    br { clear: both; }
    input { border: 1px solid black; margin-bottom: .5em;  }
    input.error { border: 1px solid red; }
    label.error {
        background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif') no-repeat;
        padding-left: 16px;
        margin-left: .3em;
    }
    label.valid {
        background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat;
        display: block;
        width: 16px;
        height: 16px;
    }
</style>


<form id="myform">
  <label for="field">Required, URL: </label>
  <input class="left" id="field" name="field"/>
  <br/>
  <input type="submit" value="Validate!" />
</form>

Answer 2

您可以使用本页

http://api 中描述的函数 change() .jquery.com/change/

来捕获您更改输入字段中的文本的时间，然后单击并应用验证器。

Answer 3

您应该能够使用验证器上的 element 方法评估单个元素：

$(document).ready(function() {
    var $validator = $("#myform").validate({
        rules: {
            field: {
                required: true,
                url: true
            }
        }
    });

    $("#field").keyup(function () {
        $validator.element(this);
    });
});

这将在每个 keyup 事件上验证 #field。

这是一个示例： http://jsfiddle.net/bp8wP/