jquery validation 提示信息美化

╰+哭是因爲堅強的太久メ 2023-03-04 12:25 53阅读 0赞

--------------------

### jquery validation 提示信息美化 ###

### \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* ###

**示例**

<!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml"
          xmlns:th="http://www.thymeleaf.org" xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="/jquery/jquery-3.5.1.min.js"></script>
        <script src="/jquery/jquery.validate.min.js"></script>
        <script src="/jquery/additional-methods.min.js"></script>
    </head>
    <style type="text/css">
        em.error {
            padding-left: 20px;
            background: greenyellow url("/images/4.gif") no-repeat 2px 0;
        }
        em.success {
            padding-left: 20px;
            background: orange url("/images/0.gif") no-repeat 2px 0;
        }
    </style>
    
    <script>
        $(function () {
            $("form").validate({
                rules: {
                    id: {
                        required: true
                    },
                    name: {
                        required: true,
                        minlength: 2
                    },
                    age: {
                        required: true,
                        digits: true,
                        min: 10
                    }
                },
    
                messages: {
                    id: {
                        required: "请输入用户 id"
                    },
                    name: {
                        required: "请输入用户姓名",
                        minlength: "用户姓名长度最小为：2"
                    },
                    age: {
                        required: "请输入用户年龄",
                        digits: "用户年龄为整数",
                        min: "用户年龄最小为：10"
                    }
                },
    
                errorElement: "em",     //在css样式表中查找em
                success: "success"      //验证成功，将success样式添加到em上，即em.success
            })
        })
    </script>
    
    <body>
    <form th:align="center">
        id: <input type="text" name="id"><br>
        name: <input type="text" name="name"><br>
        age: <input type="text" name="age"><br>
        <button id="btn">提交</button>
    </form>
    </body>
    </html>

**使用测试**

![20200804111309400.png][]

[20200804111309400.png]: /images/20230208/334ec89cb74e4d4e81500e5959a62d2b.png