jQuery:使用验证查询

时间:2012-04-12 19:19:04

标签: jquery validation

我正在查看jQuery文档中的以下源代码。你可以看到field:的位置,我将其设置为特定字段,如field:('#fieldname');

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <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>
</head>
<body>

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

</body>
</html>

1 个答案:

答案 0 :(得分:1)

该字段是对要验证的页面元素名称的引用。在您的情况下,您要验证的页面元素的名称称为“字段”:

<input class="left" id="field" name="field" />

如果它有不同的名称,那么您将在代码中使用该名称。

例如,如果您有另一个名为first_name的表单字段:

<input class="left" id="first_name" name="first_name" />

用于验证“field”和“first_name”文本框的jQuery代码将是:

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