咔叽游戏

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 471|回复: 0

[JavaScript] jquery.validate自定义验证用法实例分析【成功提示与择要提示】

[复制链接]
  • TA的每日心情
    无聊
    2019-6-2 14:11
  • 签到天数: 4 天

    [LV.2]圆转纯熟

    发表于 2020-7-6 20:56:33 | 显示全部楼层 |阅读模式
    本文实例讲述了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>

    更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery切换特效与技巧总结》、《jQuery遍历算法与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
    希望本文所述对大家jQuery程序设计有所帮助。

    原文地址:https://www.jb51.net/article/188159.htm

    QQ|免责声明|小黑屋|手机版|Archiver|咔叽游戏

    GMT+8, 2024-3-28 18:05

    Powered by Discuz! X3.4

    © 2001-2023 Discuz! Team.

    快速回复 返回顶部 返回列表