jQuery.validation增加自定义验证

<%@ Page Title="" Language="C#" MasterPageFile="~/Master/Web.Master" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="Web.Master.Index" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<script type="text/javascript" src="../scripts/jquery.js"></script>
<script type="text/javascript" src="../scripts/jquery.validate.js"></script>
<script type="text/javascript">
  // jQuery validation plug-in 1.5.5
  // jQuery.validator增加IP验证
  jQuery.validator.addMethod("ip", function(value, element) {
    return this.optional(element) || (/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/.test(value) && (RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256));
  }, "Please enter a valid ip address.");
  // 增加只能是字母和数字的验证
  jQuery.validator.addMethod("chrnum", function(value, element) {
    return this.optional(element) || (/^([a-zA-Z0-9]+)$/.test(value) && value.length >= 6 && value.length <= 20);
  }, "Please enter a valid format(6 - 20 charactors, A-Z, a-z, 0-9 only).");
  
  // 验证
  var validator = null;

  $(function() {
    // 初始验证
  validator = $("#aspnetForm").validate({
      // 验证规则
      rules: {
        username: { required: true, minlength: 5, ip: true },
        password: { required: true, minlength: 5, chrnum: true },
        vercode: { required: true, minlength: 4 }
      },
      // 验证提示信息
      messages: {
        username: { required: "&nbsp;", minlength: jQuery.format("&nbsp;") },
        password: { required: "&nbsp;", minlength: jQuery.format("&nbsp;") },
        vercode: { required: "&nbsp;", minlength: jQuery.format("&nbsp;") }
      },
      // errorElement: "li",
      // 处理错误显示
      errorPlacement: function(error, element) {
        // error.appendTo("#info");
        error.appendTo(element.next());
      },
      // 提交事件
      submitHandler: function() {
        var data = $.format("m=login&u={0}&p={1}&v={2}", $("#username").val(), $("#password").val(), $("#vercode").val());
        alert(data);
      },
      // 验证成功处理
      success: function(label) {
        label.html("&nbsp;").addClass("checked");
      }
    });
    $("#username").focus();
  });
  
  function save() {
    $("#aspnetForm").submit();
  }

  function reset() {
    if (validator != null && validator != undefined)
      validator.resetForm();
  }
  
  // 编码HTML
  function HTMLEncode(html) {
    var temp = document.createElement("div");
    (temp.textContent != null) ? (temp.textContent = html) : (temp.innerText = html);
    var output = temp.innerHTML;
    temp = null;
    return output;
  }
  
  // 显示HTML
  function showHtml() {
    document.getElementById("htm").innerHTML = HTMLEncode(document.getElementById("info").innerHTML);
  }

  // 清空显示HTML
  function clearHtml() {
    document.getElementById("htm").innerHTML = "";
  }
</script>
<style type="text/css">
* {margin:0;padding:0;font-family: Arial, Verdana, 宋体, Helvetica, sans-serif; font-size: 12px; }
body {padding:10px;}
.field {clear:both;height:28px;line-height:28px;vertical-align:middle;}
.field input {float:left;height:19px;line-height:19px;border:solid 1px #7f9db9;padding-left:3px;}
.field input.error {border:dashed 1px #a31515;}
.field .status {float:left;margin-left:6px;height:14px;line-height:14px;margin-top:4px;}
.field label.error {float:left;padding-left:16px;border:solid 0px #ccc;
    background:url(../images/unchecked.gif) no-repeat 0px 50%;font-weight: bold;color:#f00;}
.field label.checked {background:url(../images/checked.gif) no-repeat 0px 50%;}

</style>
<div id="info">
  <div class="field">
    <input type="text" id="username" name="username" /><span class="status"></span>
  </div>
  <div class="field">
    <input type="text" id="password" name="password" /><span class="status"></span>
  </div>
  <div class="field">
    <input type="text" id="vercode" name="vercode" /><span class="status"></span>
  </div>
  <div class="field">
    <a href="javascript:save();">保存</a>&nbsp;&nbsp;&nbsp;
    <a href="javascript:reset();">重置</a>&nbsp;&nbsp;&nbsp;
    <a href="javascript:showHtml();">源码</a>&nbsp;&nbsp;&nbsp;
    <a href="javascript:clearHtml();">清空</a>
  </div>
</div>
<div id="htm" style="clear:both;padding:8px;">
</div>
</asp:Content>