表单验证

最新推荐文章于 2021-12-03 20:45:04 发布
junkaili
最新推荐文章于 2021-12-03 20:45:04 发布
阅读量161
点赞数
本文链接：https://blog.csdn.net/junkaili/article/details/78058825
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">



    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
    <script>
        $.validator.setDefaults({
            submitHandler: function() {
                alert("提交事件!");
            }
        });
        $().ready(function() {
            $("#signupForm").validate({
                rules: {
                    firstname: "required",
                    lastname: "required",
                    username: {
                        required: true,
                        minlength: 4,
                        maxlength:20
                    },
                    password: {
                        required: true,
                        minlength: 6,
                        maxlength:20
                    },
                    confirm_password: {
                        required: true,
                        minlength: 6,
                        maxlength:20,
                        equalTo: "#password"
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    "topic[]": {
                        required: "#newsletter:checked",
                        minlength: 2
                    },
                    agree: "required"
                },
                messages: {

                    username: {
                        required: "您的昵称可以由小写英文字母，中文，数字组成，" +
                        "长度4-20个字符，一个汉字为两个字母",
                        minlength: "长度4-20个字符，一个汉字为两个字母"
                    },
                    password: {
                        required: "您的密码可以由大小写英文字母，数字组成，长度6-20位。",
                        minlength: "长度6-20位"
                    },
                    confirm_password: {
                        required: "请输入密码",
                        minlength: "密码长度不能小于 5 个字母",
                        equalTo: "两次密码输入不一致"
                    },
                    email: "请填写有效的Email地址，在下一步中您将用此邮箱接收验证邮件。",
                    agree: "请接受我们的声明",
                    topic: "请选择两个主题"
                }
            });
        });
    </script>
    <style>
        .error{
            color:red;
        }
    </style>
</head>
<body>
        <form  class="cmxform" id="signupForm" method="get" action="">
                    <fieldset>
                        <span id="myform">
                            <label for="email">请填写您的Email地址:</label>
                            <input id="email" name="email" type="email">
                        </span>
                       <p>
                            <label for="username"> 设置您在当当网的昵称:</label>
                            <input id="username" name="username" type="text">
                        </p>
                        <p>
                            <label for="password"> 设置密码:</label>
                            <input id="password" name="password" type="password">
                        </p>
                        <p>
                            <label for="confirm_password">再次输入您设置的密码:</label>
                            <input id="confirm_password" name="confirm_password" type="password">
                        </p>
                        <p>
                            <input class="submit" type="submit" value="提交">
                        </p>
                    </fieldset>
        </form>
        <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script src="https://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
        <script src="https://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
<script>
    jQuery.validator.setDefaults({
        debug:true,
        success:"valid"
    });
    $( "#myform" ).validate({
        rules: {
            email: "required",

        }
    });
</script>
</body>
</html>