jquery validate 添加自定义样式

最新推荐文章于 2025-05-05 12:53:59 发布

转载最新推荐文章于 2025-05-05 12:53:59 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/WuLex

Jquery及其组件专栏收录该内容

147 篇文章

订阅专栏

本文介绍如何使用jQuery Validate插件进行表单验证，并详细解释了如何自定义错误信息的显示位置、样式及图标。通过修改errorElement、success和showErrors等方法，实现了更加美观且符合需求的验证提示。

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

实现效果:

在这里插入图片描述

错误信息的默认位置以及标签

validate插件的默认错误信息插入位置是要验证的元素的后面,所用的标签是 ,验证不通过时,会给label以及所验证的元素添加 class=error, 验证通过后,label会被隐藏.

先要知道下面这几个方法

1.errorElement:标签名
表示错误信息所用的标签,默认是label
2.errorPlacement:function(error,element) { 修改错误信息的位置 }
error指的是错误信息,如用户名有误,element指的是校验的元素,如用户名输入框,方法体内可以写错误信息出现在校验元素,如:

errorPlacement: function (error, element) { $(element).after(error); },

3.success:function(参数名) { }
参数指的是错误信息的标签,方法体可以写对这个标签的样式的操作.
4.showErrors:function (errorMap, errorList) {}
这里只用到errorMap,errorMap是出错元素的一个键值对的集合, 其中的键是元素name属性的值,值是元素的value.

直接上代码

css代码:

em {font-size:10px; color:red}
em.success {
    color:green;
}

js代码:

$(function () {
    var pic = '<span class="glyphicon glyphicon-remove"></span>';
    //bootstrap的字体图标,这是上面图片中的×
    $("#myForm").validate({
        rules: {
            name: "required",
            password: "required"
        },
        messages: {
            name: pic + "用户名不能为空",
            password:pic + "密码不能为空"
        },

        errorElement: "em", //可以用其他标签，记住把样式也对应修改
        success: function(em) {
            //em指向上面那个错误提示信息标签em
            $(em).text("").addClass("glyphicon glyphicon-ok-circle success");
            //先清空em元素里的内容,然后添加一个成功的√的字体图标样式,success是一个样式,让这个字体图标变成绿色
        },

        showErrors:function (errorMap, errorList) {
            for (var element in errorMap) {
                $("#" + element).next("em").removeClass();
                //去除success样式和字体图标,不去除会跟错误信息一起出现
            }
            this.defaultShowErrors();
            //默认的错误信息显示样式
        }
    })
});

完整html代码:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="css/bootstrap.min.css" rel="stylesheet"/>
    <style type="text/css">
        em {
            color: red;
            font-size: 15px;
        }

        #myForm {
            margin: 20px;
        }

        em.success { color: green; }
    </style>
    <script src="scripts/jquery-1.8.2.js"></script>
    <script src="scripts/jquery.validate.js"></script>
    <script src="scripts/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(function() {
            var pic = '<span class="glyphicon glyphicon-remove"></span>';
            //bootstrap的字体图标,这是上面图片中的×
            $("#myForm").validate({
                rules: {
                    name: "required",
                    password: "required"
                },
                messages: {
                    name: pic + "用户名不能为空",
                    password: pic + "密码不能为空"
                },

                errorElement: "em", //可以用其他标签，记住把样式也对应修改
                success: function(em) {
                    //em指向上面那个错误提示信息标签em
                    $(em).text("").addClass("glyphicon glyphicon-ok-circle success");
                    //先清空em元素里的内容,然后添加一个成功的√的字体图标样式,success是一个样式,让这个字体图标变成绿色
                },

                showErrors: function(errorMap, errorList) {
                    for (var element in errorMap) {
                        $("#" + element).next("em").removeClass();
                        //去除success样式和字体图标,不去除会跟错误信息一起出现
                    }
                    this.defaultShowErrors();
                    //默认的错误信息显示样式
                }
            });
        });
    </script>
</head>

<body>
<form id="myForm">
    <div>
        <label for="name">用户名</label>
    </div>
    <div>
        <input type="text" name="name" id="name" />
    </div>
    <div>
        <label for="password">密码</label>
    </div>
    <div>
        <input type="text" name="password" id="password" />
    </div>
    <div>
        <button type="submit">提交</button>
    </div>
</form>
</body>

</html>