jQuery Validate 表单验证

逃离我推掉我的手 2021-10-01 11:16 364阅读 0赞

<!DOCTYPE html>
    <html lang="zh-CN">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>登陆丨Sharelink</title>
    <link rel="stylesheet" href="Content/style.css">
    <body>
    <div class="login-container">
    <h1>ShareLink</h1>
    <div class="connect">
    <p>Link the world. Share to world.</p>
    </div>
    <form action="" method="post" id="loginForm">
    <div>
    <input type="text" name="username" class="username" placeholder="用户名" autocomplete="off"/>
    </div>
    <div>
    <input type="password" name="password" class="password" placeholder="密码" oncontextmenu="return false" onpaste="return false" />
    </div>
    <button id="submit" type="submit">登 陆</button>
    </form>
    
    <a href="register.html">
    <button type="button" class="register-tis">还有没有账号？</button>
    </a>
    
    </div>
    
    </body>
    <script src="Scripts/jquery.min.js"></script>
    <script src="Scripts/common.js"></script>
    
    <script src="Scripts/supersized.3.2.7.min.js"></script>
    <script src="Scripts/supersized-init.js"></script>
    
    <script src="Scripts/jquery.validate.min.js"></script>
    </html>

> <--common.js-->

//打开字滑入效果
    window.onload = function(){
        $(".connect p").eq(0).animate({"left":"0%"}, 1000);
        $(".connect p").eq(1).animate({"left":"0%"}, 400);
    };
    //jquery.validate表单验证
        $(document).ready(function(){
    //登陆表单验证
        $("#loginForm").validate({
            rules:{
                username:{
                  required:true,//必填
                  minlength:3, //最少6个字符
                  maxlength:32,//最多20个字符
                },
                password:{
                  required:true,
                  minlength:3, 
                  maxlength:32,
                },
            },
    //错误信息提示
          messages:{
              username:{
                required:"必须填写用户名",
                minlength:"用户名至少为3个字符",
                maxlength:"用户名至多为32个字符",
                remote: "用户名已存在",
              },
            password:{
                required:"必须填写密码",
                minlength:"密码至少为3个字符",
                maxlength:"密码至多为32个字符",
            },
        },
    });
    //注册表单验证
        $("#registerForm").validate({
            rules:{
                username:{
                    required:true,//必填
                    minlength:3, //最少6个字符
                    maxlength:32,//最多20个字符
                    remote:{
                          url:"http://kouss.com/demo/Sharelink/remote.json",//用户名重复检查，别跨域调用
                          type:"post",
                    },
                },
                password:{
                    required:true,
                    minlength:3, 
                    maxlength:32,
                },
                email:{
                    required:true,
                    email:true,
                },
                confirm_password:{
                    required:true,
                    minlength:3,
                    equalTo:'.password'
                },
                phone_number:{
                    required:true,
                    phone_number:true,//自定义的规则
                    digits:true,//整数
                }
        },
    //错误信息提示
        messages:{
              username:{
                  required:"必须填写用户名",
                  minlength:"用户名至少为3个字符",
                  maxlength:"用户名至多为32个字符",
                  remote: "用户名已存在",
              },
              password:{
                  required:"必须填写密码",
                  minlength:"密码至少为3个字符",
                  maxlength:"密码至多为32个字符",
              },
              email:{
                  required:"请输入邮箱地址",
                  email: "请输入正确的email地址"
              },
              confirm_password:{
                  required: "请再次输入密码",
                  minlength: "确认密码不能少于3个字符",
                  equalTo: "两次输入密码不一致",//与另一个元素相同
              },
              phone_number:{
                  required:"请输入手机号码",
                  digits:"请输入正确的手机号码",
              },
    },
    });
    //添加自定义验证规则
    jQuery.validator.addMethod("phone_number", function(value, element) { 
              var length = value.length; 
              var phone_number = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8}|(18[0-9]{1}))$/ 
              return this.optional(element) || (length == 11 && phone_number.test(value)); 
    }, "手机号码格式错误"); 
    });