10.jQuery UI 验证表单

最新推荐文章于 2025-06-03 09:11:33 发布

初心始终钰

最新推荐文章于 2025-06-03 09:11:33 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery UI

本文链接：https://blog.youkuaiyun.com/qq_16430735/article/details/38470691

jQuery UI 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一个使用jQuery validate.js插件实现的表单验证案例，包括如何显示错误信息、使用自定义图标反馈验证状态以及调整对话框高度等功能。通过这个案例，读者可以了解到如何将表单验证与美观的设计相结合。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 : '请输入正确的日期！',

      },

   },

});