jquery validation 使用

分手后的思念是犯贱 2023-03-04 11:26 3阅读 0赞

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

### jquery validation 使用 ###

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

**示例**

**index.html**

<!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-method.min.js"></script>
        <script src="/jquery/jquery.validate.min.js"></script>
    </head>
    <script>
        $(function () {
            $("form").validate({
                rules: {
                    id: {
                        required: true
                    },
                    name: {
                        required: true,
                        minlength: 2
                    },
                    age: {
                        required: true,
                        digits: true,
                        min: 10
                    },
                    url: {
                        required: true,
                        url: true
                    },
                    email: {
                        required: true,
                        email: true
                    }
                }
            })
        })
    </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>
        url: <input type="url" name="url"><br>
        email: <input type="email" name="email"><br>
        <button id="btn">提交</button>
    </form>
    </body>
    </html>

**使用测试**

![20200803172616899.png][]

**当输入的值不满足验证要求时，可及时提示相关信息**

[20200803172616899.png]: /images/20230208/48e397ea7e9c4bb493cea394927298e5.png