Home > Article > Web Front-end > How to use jQuery's validate.js form validation plug-in (code example)

How to use jQuery's validate.js form validation plug-in (code example)

青灯夜游forward: 2018-10-23 17:57:092043browse

The content of this article is to introduce how to use jQuery's validate.js form validation plug-in (code example). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Effect:

Code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单验证插件Validate</title>
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/jquery.validate.min.js"></script>
    <style>
        body {
            background-color: #000;
        }
        
        form {
            width: 361px;
            margin: 80px auto;
            padding: 50px;
            border: 2px solid #666;
            box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
            background-color: #999;
            border-radius: 10px;
            box-sizing: border-box;
        }
        
        form>p {
            margin-bottom: 20px;
            color: #fff;
        }
        
        form>p>label {
            display: inline-block;
            width: 80px;
            text-align: center;
        }
        
        label.error {
            display: block;
            width: 100%;
            color: rgb(189, 42, 42);
            font-size: 12px;
            text-align: right;
            margin-top: 5px;
        }
        
        input {
            width: 170px;
            height: 20px;
            outline: none;
            background-color: #ddd;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        
        .submit {
            width: 170px;
            margin: 30px auto 0;
        }
        
        .submit input {
            background-color: #0099aa;
            color: #fff;
            border: 0;
            padding: 5px;
            height: 30px;
        }
    </style>
</head>

<body>
    <form id="signupForm" action="" method="post">
        <p>
            <label for="name">姓名：</label>
            <input type="text" id="name" name="name">
        </p>
        <p>
            <label for="email">邮箱：</label>
            <input type="email" id="email" name="email">
        </p>
        <p>
            <label for="password">密码：</label>
            <input type="password" id="password" name="password">
        </p>
        <p>
            <label for="confirm_password">确认密码：</label>
            <input type="password" id="confirm_password" name="confirm_password">
        </p>
        <p class="submit">
            <input type="submit" value="提交">
        </p>
    </form>
</body>
<script>
    $(function() {
        $("#signupForm").validate({
            rules: {
                name: "required",
                email: {
                    required: true,
                    email: true
                },
                password: {
                    required: true,
                    minlength: 5
                },
                confirm_password: {
                    required: true,
                    minlength: 5,
                    equalTo: "#password"
                }
            },
            messages: {
                name: "请输入姓名",
                email: {
                    required: "请输入Email地址",
                    email: "请输入正确的Email地址"
                },
                password: {
                    required: "请输入密码",
                    minlength: "密码不能小于5个字符"
                },
                confirm_password: {
                    required: "请输入确认密码",
                    minlength: "确认密码不能小于5个字符",
                    equalTo: "两次输入的密码不一致"
                }
            }
        });
    })
</script>

</html>

The above is the detailed content of How to use jQuery's validate.js form validation plug-in (code example). For more information, please follow other related articles on the PHP Chinese website!

Statement：

This article is reproduced at:cnblogs.com. If there is any infringement, please contact admin@php.cn delete

Previous article：Summarize the method of using WeChat public account payment in vue projectNext article：Summarize the method of using WeChat public account payment in vue project

See more

How to use jQuery's validate.js form validation plug-in (code example)

Related articles