validate layer 提供友好验证提示

草根一枚,网上搜索很多关于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>

效果图:

时间: 2024-08-11 09:57:49

validate layer 提供友好验证提示的相关文章

表单验证提示插件validate

此表单验证插件会对表单字段进行验证,实时提示用户输入信息,用户体验非常好,验证提示紧随input框! 以下为表单验证案例代码: <script type="text/javascript" src="jquery-3.2.1.js"></script> <script type="text/javascript" src="jquery.validate.min.js"></scrip

基于Jquery Validate 的表单验证

基于Jquery Validate 的表单验证 jquery.validate.js是jquery下的一个验证插件,运用此插件我们可以很便捷的对表单元素进行格式验证. 在讲述基于Jquery Validate的表单验证前,我们先回顾一下基础纯JS的表单验证. 1.回顾基于JS的表单验证 我们先写一个简单的验证邮箱.手机号的表单,页面代码如下: 1 <form action="XXXX.action" method="post" onsubmit="r

jquery.validate remote 和 自定义验证方法

jquery.validate remote 和 自定义验证方法 $(function(){ var validator = $("#enterRegForm").validate({debug:false, //调试模式取消submit的默认提交功能//errorClass: "error",//默认为错误的样式类为:error//validClass: "check",//验证成功后的样式,默认字符串validfocusInvalid: tr

Validform和aui2.0结合使用的表单自定义验证提示和列表页异步获取数据Demo

二.添加自定义验证演示       Validform验证提示大多都是在输入框或下拉框的右边或下面.感觉就是不美观,特别是表单字段少的时候,这种在相应对象旁边的提示就没必要了,      它会给人一种不友好的感觉(只是自己的感觉).所以下面写了三种添加演示,希望大家能给出建议,以免下次用起来纠结,不知道用哪种好.        表单验证插件是我们经常使用的Validform_v5.3.2_min.js.先上添加1演示的表单验证js代码,这里我设置了点击提交按钮后才验证.其他添加演示的区别不大,详

jQuery Validate 提交表单验证失败扩展方法

由于Validate没有提供表单提交过后,验证不通过触发方法.这里做一下扩展. 引用场景:每次提交表单元素验证不通过触发方法 打开源代码 找到focusInvalid 方法, 这里是提交表单时验证不通过触发方法,在这里做扩展是就好不 过的. focusInvalid: function() { if ( this.settings.focusInvalid ) { try { $(this.findLastActive() || this.errorList.length && this.

Jquery.validate.js表单验证插件的使用

作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例讲解应用.it's perfect. 首先记录一些使用过程中,爱犯的错误: 1>忘记给表单form添加id属性 2>input这些表单标签必须id属性和name属性名字一样.例如:<input type="text" id="name" name=&q

[CareerCup] 4.5 Validate Binary Search Tree 验证二叉搜索树

4.5 Implement a function to check if a binary tree is a binary search tree. LeetCode上的原理,请参见我之前的博客Validate Binary Search Tree 验证二叉搜索树.

jquery.validate.js表单验证

引用jquery封装好的js文件进行表单验证,提高了Web开发的效率.我写了一个验证的实例给大家展示一下. 实例中包含的验证方法还不全面,如果没有大家想要的可以通过 百度搜索关键:jquery.validate.js表单验证帮助文档来进行查阅. 引入的js文件: <script type="text/javascript" src="js/jquery-1.11.2.js"></script> <script type="te

vb6-很简单的配置密码验证提示

1 '很简单的配置密码验证提示 2 3 Dim add As String 4 add = Trim(InputBox("请输入配置密码", "报表配置")) 5 If add = "" Then 6 MsgBox "密码不能为空,请重新输入!", 64, "提示信息" 7 Exit Sub 8 ElseIf add = "123456" Then 9 Frm_Main.Show vbM