validate layer 提供友好验证提示

Posted 2020-08-16

草根一枚，网上搜索很多关于validate验证表单样式的修改方法，但是都不理想，实在没办法，自己去研究，用了小半天的时间，效果算是可以把，吧代码贴出来分享下，写的不好勿怪！！！！直接代码：

    $(function () {
        //$.my_validate("#ajax_form");
        //除去tips
        function remove_layertips(obj) {
            var layer_index = obj.attr(‘layer_index‘);
            if (layer_index != "" && layer_index != undefined && layer_index != null) {
                layer.close(layer_index);
            }
        }
        $("#ajax_form").validate({
            onkeyup: function (element) { $(element).valid(); },//切记这里设置true 是会报错的
            focusCleanup: true,
            success: function (element) {
                var elem = $(element);
                var itemId = elem[0].htmlFor;
                var input_validate = $("#" + itemId);
                remove_layertips(input_validate);
            },
            errorPlacement: function (error, element) {
                var elem = $(element);
                if (!error.is(‘:empty‘)) {
                    var errorlist = elem.filter(‘:not(.valid)‘);
                    errorlist.each(function () {
                        remove_layertips($(this));
                        index = layer.tips(error[0].innerText, $(this), {tips:[2,‘#acacac‘],  time: 0, tipsMore: true, zIndex: 2000, style: [‘background-color:#acacac;‘] });
                        $(this).attr(‘layer_index‘, index);
                    });
                }
            },
        });
    });

　　html部分

 1    <form id="ajax_form" method="post" action="<?php echo site_url(‘admin/banner/add_banner‘)?>">
 2              
 3               <table width="100%" border="0" cellpadding="8" cellspacing="0" class="tableBasic">
 4                  
 5                  <tr>
 6                      <td width="100" align="right">权重</td>
 7                      <td>
 8                          <input type="text" name="weight" id="weight" size="40" class="inpMain " required digits="true" value="0" />
 9                      </td>
10                  </tr>
11                  <tr>
12                      <td></td>
13                      <td>
14                          <input type="submit" class="btn" value="添加" />
15                          <input name="button" class="btn not" type="button" value="取消">
16                      </td>
17                  </tr>
18  
19             </table>
20          </form>

 

效果图：