注册登录——前端、后台验证(正则表达式)

注册

• 界面如图

  

  • 前端验证

    • html页面代码

        <form id="form_reg">
                    <div>
                        <input type="text" id="account" name="account" placeholder="请输入邮箱" />
                    </div>
                    <div class="isMale">
                        <input type="radio" name="male" id="male" value="true" checked><label for="male">男</label>&nbsp;&nbsp;
                        <input type="radio" name="male" id="female" value="false"><label for="female">女</label>
                    </div>
                    <div>
                        <input type="password" id="password" name="password" placeholder="请输入密码" />
                    </div>
                    <div>
                        <input type="password" id="repeatPassword" name="repeatPassword" placeholder="请重复密码" />
                    </div>
                    <div>
                        <table border="0" height="60px">

                            <tr>
                                <td><input type="text" id="yzm" name="yzm" style="width: 100%; height: 40px; display: inline-block;"></td>
                                <td><p style="width: 20px;"></p></td>
                                <td> <img src="/doGet" alt="" id="captcha1" onclick="refreshCaptcha()" style="height: 40px; width: 100%; vertical-align: middle;">
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div>
                        <input id="btnSubmit" type="submit" value="注册"><br><br>
                    </div>

                </form>

 - JQuery实现前端验证

                 <script>

        function refreshCaptcha(){
            var ran = Math.floor(Math.random() * 100)
            $("#captcha1").attr("src","/doGet?" + ran);
        }

        $("#btnSubmit").on("click",function(event){
            event.preventDefault();

            if ($("#account").val().trim().length < 1) {
                layer.msg("请选择或填写邮箱！");
                $("#account").focus();
                return;
            }
            var reg1 = /^[a-zA-Z0-9][w.-]*[a-zA-Z0-9]@[a-zA-Z0-9][w.-]*[a-zA-Z0-9].[a-zA-Z][a-zA-Z.]*[a-zA-Z]$/;
            var input1 = $("#account").val();
            if(!reg1.test(input1)){
                layer.msg("邮箱格式错误，请输入正确邮箱");
                return;
            }

            if ($("#password").val().trim().length < 1) {
                layer.msg("请填写密码！");
                $("#password").focus();
                return;
            }
            var pass = /^[a-zA-Z]w{5,17}$/;
            var input2 = $("#password").val();
            if(!pass.test(input2)){
                layer.msg("密码长度要在6~18位之间,且必须以字母开头！")
                return;

            }
            if ($("#repeatPassword").val().trim().length < 1) {
                layer.msg("请填写确认密码！");
                $("#repeatPassword").focus();
                return;
            }

            if (($("#repeatPassword").val().trim())!=($("#password").val().trim())) {
                layer.msg("两次密码填写不一致！");
                $("#repeatPassword").focus();
                return;
            }
            if ($("#yzm").val().trim().length < 1) {
                layer.msg("请填写验证码！");
                $("#yzm").focus();
                return;
            }


            $.post("/api/register", $("#form_reg").serialize(), function(res) {
                if(res.code == 200){
                    setTimeout(function(){
                        location.reload();
                    },2000);
                    layer.msg("注册成功，请前往邮箱进行激活登录！")
                }else{
                    //$(".error-message").text(res.message);
                    layer.msg(res.message)
                }

            })

        })

    </script>

• 后台验证

  • 前端后台使用的连接方式是MyBatis；
  • 后台验证代码如下：

      String regex = "^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$";
        if( !match(regex,account)){
            return new JSONResult(400,"邮箱格式错误!");
        }

        if(!password.equals(repeatPassword)){
            message ="两次输入密码不一致";
        }
        if(!yzm.equals(varCode)){
           message = "验证码输入不正确";

        }

• 邮箱激活功能，需要导入邮箱写邮件的依赖、权限等，此处不详细介绍，

       WriteEmail.emailSend(user.getEmail(), "http://localhost:8088/" + salt);

登录

• 登录页面如下：

  

• 前端验证，代码如下：

  • Form表单代码

    <form id="form_login">
                    <div>
                        <input type="text" id="account" name="account" placeholder="请输入邮箱">
                    </div>
                    <div>
                        <input type="password" id="password" name="password" placeholder="请输入密码">
                    </div>

                    <div>
                        <input id="btnLogin" type="submit" value="登录">
                    </div>
    </form>

 - Jquery验证，

    <script>
        $("#btnLogin").on("click",function(event){
            event.preventDefault();
            if ($("#account").val().trim().length < 1) {
                layer.msg("请填写邮箱或手机号")
                $("#account").focus();
                return;
            }
                var reg = /^1[34578]\d{9}$/;
                var reg2 = /^[a-zA-Z0-9][w.-]*[a-zA-Z0-9]@[a-zA-Z0-9][w.-]*[a-zA-Z0-9].[a-zA-Z][a-zA-Z.]*[a-zA-Z]$/;
                var input2 = $("#account").val();
                var input1 = $("#account").val();
                if(!reg.test(input1)&&!reg2.test(input2)){
                    layer.msg("请输入正确的邮箱或者手机格式！")
                }

            if ($("#password").val().trim().length < 1) {
                layer.msg("请选择或填写密码！");
                $("#password").focus();
                return;

            }

            $.post("/api/login", $("#form_login").serialize(), function(res) {
                if(res.code == 200){
                    setTimeout(function(){
                        location.href = "/index";
                    },2000);
                    layer.msg("登录成功，正在跳转")
                }else{
                    //$(".error-message").text(res.message);
                    layer.msg(res.message)
                }

            })

        })

    </script>

• 后台验证，代码如下：

      String mobile = "^1[34578]\d{9}$";

        String regex = "^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$";
        System.out.println(match(regex,account));
        if( !match(regex,account) && !match(mobile,account)){
           return new JSONResult(400,"邮箱或手机号格式错误!");

       }else {

           User user = userService.login(account, password);
           log.info("user", user);
           if(user==null){
               return  new JSONResult(400,"账号或密码错误！");
           }else {
               if(user.getStatus()!=2){
                   return  new JSONResult(400,"邮箱未注册或未激活!");
               }

• 总结：
  验证需要前端后端都进行验证，不能感觉前端验证了就安全了，bug是未知的，风险就是未知的，可能会导致不可挽回的错误，在验证的同时，不调用数据库来实现验证，上线的项目，数据库注入一样的危险！！！