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 >