表单验证

来源：互联网发布：网络按通信范围可分为编辑：程序博客网时间：2024/06/04 23:36
<!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>
阅读全文
0 0