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

注册

• 界面如图

  

• 前端验证

  • 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是未知的，风险就是未知的，可能会导致不可挽回的错误，在验证的同时，不调用数据库来实现验证，上线的项目，数据库注入一样的危险！！！