10.jQuery UI 验证表单

html : 

html 部分加个存放错误提示的列表标签。

<ol class="reg_error"></ol>

CSS : 

css 部分成功后引入一张小图标，还有错误列表样式。

#reg p .star {

   color:maroon;

}

#reg p .success {

   display:inline-block;

   width:28px;

   background:url(../img/reg_succ.png) no-repeat;

}

#reg ol {

   margin:0;

   padding:0 0 0 20px;

   color:maroon;

}

#reg ol li {

   height:20px;

}

jQuery : 

基本使用了validate.js 的核心功能。

$('#reg').dialog({

   autoOpen : false,

   modal : true,

   resizable : false,

   width : 320,

   height : 340,

   buttons : {

      '提交' : function () {

                 $(this).submit();

              }

   },

}).buttonset().validate({

   submitHandler : function (form) {

      alert('验证完成，准备提交！');

   },

   showErrors : function (errorMap, errorList) {

      var errors = this.numberOfInvalids();

      if (errors > 0) {

         $('#reg').dialog('option', 'height', 20 * errors + 340);

      } else {

         $('#reg').dialog('option', 'height', 340);

      }

      this.defaultShowErrors();

   },

   highlight: function (element, errorClass) {

      $(element).css('border', '1px solid #630');

   },

   unhighlight : function (element, errorClass) {

      $(element).css('border', '1px solid #ccc');

      $(element).parent().find('span').html(' ').addClass('succ');

   },

   errorLabelContainer : 'ol.reg_error',

   wrapper : 'li',

   rules : {

      user : {

         required : true,

         minlength : 2,

      },

      pass : {

         required : true,

         minlength : 6,

      },

      email : {

         required : true,

         email : true,

      },

      date : {

         date : true,

      },

   },

   messages : {

      user : {

         required : '帐号不得为空！',

         minlength : jQuery.format('帐号不得小于{0}位！'),

      },

      pass : {

         required : '密码不得为空！',

         minlength : jQuery.format('密码不得小于{0}位！'),

      },

      email : {

         required : '邮箱不得为空！',

         email : '请输入正确的邮箱格式！',

      },

      date : {

         date : '请输入正确的日期！',

      },

   },

});