Question

我有这段代码可以检查网址是否是有效的网址。

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

我怎样才能做到这一点？我对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

您可以使用此页面中描述的功能change()

http://api.jquery.com/change/

在更改输入字段中的文本时捕获，然后单击“离开”，然后应用验证器。

Answer 2

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

<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 3

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

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

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

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

以下是一个例子： http://jsfiddle.net/bp8wP/

jquery运行KeyUp而不是提交功能

3 个答案: