下面是完整的攻略：

ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList

在ASP.NET应用程序中，通常需要使用DropdownList下拉列表作为表单控件之一，通过该控件可以让用户从预定义的选项列表中选择一个值。然而，在提交表单之前，我们需要保证用户已经选择了合法的选项。为此，我们可以借助jQuery validation插件实现对DropDownList的客户端校验。本文将详细介绍如何使用该插件。

1. 引用jQuery validation插件

在使用jQuery validation插件之前，需要先引入所需的相关文件。我们可以通过CDN方式引用，也可以下载该插件并引用本地文件。具体代码如下：

<!-- 引入jQuery核心文件 -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!-- 引入jQuery validation文件 -->
<script src="https://cdn.bootcss.com/jquery-validate/1.19.0/jquery.validate.min.js"></script>

2. 创建DropDownList控件

在前端页面中，我们需要创建一个DropDownList下拉列表控件。具体代码如下：

<select id="ddlColor" name="ddlColor">
  <option value="">请选择颜色</option>
  <option value="red">红色</option>
  <option value="green">绿色</option>
  <option value="blue">蓝色</option>
</select>

在代码中，我们创建了一个id为ddlColor的DropDownList控件，其中包含了4个选项，第一个选项为提示文本，不包含任何值。在用户选择其他选项时，DropDownList控件的值会被更新为对应的value属性值。

3. 应用jQuery validation插件

现在，我们需要应用jQuery validation插件对DropDownList进行客户端校验。在JS代码中，我们需要先对DropDownList控件进行选择，然后调用.validate()方法创建校验规则。具体代码如下：

$(document).ready(function () {
  $("#ddlColor").validate({
    rules: {
      ddlColor: {
        required: true
      }
    },
    messages: {
      ddlColor: {
        required: "请选择一种颜色"
      }
    }
  });
});

在代码中，我们通过$()来选择id为ddlColor的DropDownList控件，然后调用.validate()方法创建校验规则。在校验规则中，我们需要指定需要校验的字段以及校验规则。在该示例中，我们需要校验ddlColor字段，并规定该字段必填。同时，在提示信息中添加了一条自定义提示文本，以便提醒用户选择合适的选项。

4. 示例说明

在以下两个示例中，我们演示了如何通过jQuery validation插件对DropDownList进行客户端校验：

示例1

在第一个示例中，我们创建了一个含有两个DropDownList控件的表单。其中一个控件需要选择颜色，一个控件需要选择尺码。我们使用了相同的校验规则对这两个控件进行校验。代码如下：

<form id="form1" method="post" action="">
  <label for="ddlColor">颜色：</label>
  <select id="ddlColor" name="ddlColor">
    <option value="">请选择颜色</option>
    <option value="red">红色</option>
    <option value="green">绿色</option>
    <option value="blue">蓝色</option>
  </select>
  <br />
  <label for="ddlSize">尺码：</label>
  <select id="ddlSize" name="ddlSize">
    <option value="">请选择尺码</option>
    <option value="s">S</option>
    <option value="m">M</option>
    <option value="l">L</option>
    <option value="xl">XL</option>
  </select>
  <br />
  <input type="submit" value="提交" />
</form>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<script>
  $(document).ready(function () {
    $("#form1").validate({
      rules: {
        ddlColor: {
          required: true
        },
        ddlSize: {
          required: true
        }
      },
      messages: {
        ddlColor: {
          required: "请选择一种颜色"
        },
        ddlSize: {
          required: "请选择一种尺码"
        }
      }
    });
  });
</script>

在代码中，我们通过$()来选择form表单元素，然后调用.validate()方法创建校验规则。在校验规则中，我们需要指定需要校验的字段以及校验规则。在该示例中，我们分别对ddlColor和ddlSize字段进行了校验，并规定这两个字段必填。如果用户没有选择任何选项，插件会显示相应的提示信息。

示例2

在第二个示例中，我们添加了一个自定义校验规则，用于校验DropDownList控件的选项是否合法。代码如下：

<form id="form2" method="post" action="">
  <label for="ddlFruit">水果：</label>
  <select id="ddlFruit" name="ddlFruit">
    <option value="">请选择水果</option>
    <option value="apple">苹果</option>
    <option value="banana">香蕉</option>
    <option value="orange">橙子</option>
  </select>
  <br />
  <input type="submit" value="提交" />
</form>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<script>
  $.validator.addMethod("fruit", function (value, element, param) {
    return value != "banana";
  }, "香蕉不能选");

  $(document).ready(function () {
    $("#form2").validate({
      rules: {
        ddlFruit: {
          required: true,
          fruit: true
        }
      },
      messages: {
        ddlFruit: {
          required: "请选择一种水果"
        }
      }
    });
  });
</script>

在代码中，我们首先通过$.validator.addMethod()方法添加了一个名为"fruit"的自定义校验规则，在该规则中，我们规定如果选中的值为"banana"，则校验不通过。在.form2表单元素的校验规则中，我们除了规定了必填条件，还添加了一个名为"fruit"的自定义校验规则。如果用户尝试选择香蕉时，将会收到一条包含"香蕉不能选"的提示信息。