zoukankan      html  css  js  c++  java
  • jquery.validate自定义验证--成功提示与择要提示

    1. 自定义验证--成功提示

    1) 添加选项
    errorClass: "unchecked",
    validClass: "checked",
    errorElement: "span",
    errorPlacement: function (error, element) {
    	if (element.parent().find("span[for=""" + element.attr("id") + """]") != null) {
    		element.parent().find("span[for=""" + element.attr("id") + """]").remove();
    	}
    	error.appendTo(element.parent());
    },
    success: function (label) {
    	label.removeClass("unchecked").addClass("checked");
    },
    2)设置样式
    input.unchecked{border: 1px #E6594E dotted;}
    span.checked {
      padding: 3px 5px 3px 21px;margin-left: 10px;margin-top: 0px;margin-bottom: 3px;adisplay: inline;
      height: 25px;line-height: 1px;font-size: 12px;aborder: 1px solid #E6594E;white-space: nowrap;
      text-align: left;color: #E6594E;background:url("/Common/Sys/Cfg/images/checked.gif") no-repeat 3px;/* #FCEAE8 */
    }
    span.unchecked {
      padding: 3px 5px 3px 21px;margin-left: 10px;margin-top: 0px;margin-bottom: 3px;adisplay: inline;
      height: 25px;line-height: 1px;font-size: 12px;border: 1px solid #E6594E;white-space: nowrap;
      text-align: left;color: #E6594E;background: #FCEAE8 url("/Common/Sys/Cfg/images/unchecked.gif") no-repeat 3px;          
    }


    2. 自定义验证--择要提示

    1) 添加选项
    errorContainer: container,
    errorLabelContainer: $("ul", container),
    wrapper: ""li"",
    meta: "validate",
    errorClass: "unchecked",
    validClass: "checked",
    2) 设置样式
    input.unchecked{border: 1px #E6594E dotted;}
    span.checked {
      padding: 3px 5px 3px 21px;margin-left: 10px;margin-top: 0px;margin-bottom: 3px;adisplay: inline;
      height: 25px;line-height: 1px;font-size: 12px;aborder: 1px solid #E6594E;white-space: nowrap;
      text-align: left;color: #E6594E;background:url("/Common/Sys/Cfg/images/checked.gif") no-repeat 3px;/* #FCEAE8 */
    }
    span.unchecked {
      padding: 3px 5px 3px 21px;margin-left: 10px;margin-top: 0px;margin-bottom: 3px;adisplay: inline;
      height: 25px;line-height: 1px;font-size: 12px;border: 1px solid #E6594E;white-space: nowrap;
      text-align: left;color: #E6594E;background: #FCEAE8 url("/Common/Sys/Cfg/images/unchecked.gif") no-repeat 3px;          
    }
    div.container {
    	background-color: #eee;
    	border: 1px solid red;
    	margin: 5px;
    	padding: 5px;
    }
    div.container ol li {
    	list-style-type: disc;
    	margin-left: 20px;
    }
    div.container { display: none }
    .container label.error {
    	display: inline;
    }
    3) 添加择要标识表记标帜
    <div class="container">
        <h4>There are serious errors in your form submission, please see below for details.</h4>
        <ul></ul>
    </div> 


  • 相关阅读:
    解决myeclipse2014 中使用低版本的maven插件
    菜鸟成长之路-------使用过滤器实现自动登录
    动态代理
    JSON资料整理
    转账案例中引入事务
    ThreadLocal来管理事务
    【临窗旋墨-leetcode】0001-两数之和-[简单]
    shiro是如何清除过期session的(源码版本shiro1.6)
    [临窗旋墨]javaMelody初始化以及销毁时的处理逻辑及监控日志丢失问题排查
    Eclipse 的 git 插件操作 "代码提交"以及"代码冲突"
  • 原文地址:https://www.cnblogs.com/moqiang02/p/4061336.html
Copyright © 2011-2022 走看看